todo.view = function(ctrl) { return m("html", [ m("body", [ m("input"), m("button", "Add"), m("table", [ m("tr", [ m("td", [ m("input[type=checkbox]") ]), m("td", "task description"), ]) ]) ]) ]); };
@jsx m
todo.view = function(ctrl) {
return (
<html>
<body>
<input/>
<button>Add</button>
<table>
<tr>
<td><input type="checkbox"/></td>
<td>Desk description</td>
</tr>
</table>
</body>
</html>
);
}todo.view = function(ctrl) { return m("html", [ m("body class='application", [ m("input class='add input input-sm input-md"), m("button class='btn btn-success button-green", "Add"), m("table class='table table-strped table-row", [ m("tr class='tr'", [ m("td", [ m("input[type=checkbox] class='checkbox input input-sm' id=firstName name=firstName") ]), m("td class='td", "task description"), ]) ]) ]) ]); };
I honestly can't tell you what the hell that is supposed to be anymore. Also, you guys are using invalid html for everything. Your example is not going to validate on anything.
Also, just FYI, the selector syntax follows CSS rules, so you'd write m("body.application"), not m("body class='application'")
> Yes, it would be simplificantly simpler to edit html
> if it wasn't stuck in between two strings
> ...
> m("body class='application", ...
m("body", {class: "application"}, [ ... ])
Quite neat that you can use it for non-React stuff just by tweaking the pragma comment the JSX transformer requires.
Here's an actual example of a Bootstrap table in a React component using JSX: https://github.com/insin/lifequote/blob/master/src/component...
There's not much display logic in it, so it doesn't exhibit the usual progression I've seen when writing React components so far, in which most display logic happens up-front in a component's render() and often gets moved into another method and called directly from where it's going to go in the structure being returned from render(), so you generally don't end up with huge whacks of JSX in components which are doing more work.
```js / @jsx m.dom */
function m(type, props, children) { // assuming m() looks something like this. return { type: type, props: props, children: children}; } m.render = function(lwDOM){ console.log(lwDOM)}; m.dom = {};
// React hard codes this array so we can do something like this to build the mapping ['a', 'span'].forEach((el) => { m.dom[el] = function(props, ...args) { return m.call(null, el, props, args); } });
m.render( <a href={"google.com"}> <span>hello</span> <span>world</span> </a> ); ```
Guys, rule of thumb, architecture === directory names. Performance is an implementation detail.
Frameworks live and die by their APIs. The easier it is to work with, to read and write and reason with, the better it is.
But you know what, this can be easily proved. Someone take a stab at todomvc with this and let me know if it hurt or not.
- I'm not sure why you're doing `return m("#todo-app"), [...]` on line 15 of the view, it looks like a typo
- I would probably have written a keyboard utility function similar to m.withAttr to keep the e.keyCode stuff out of the controller and remove the anonymous function in the view
- I generally prefer inline ternary syntax instead of a if statement at the top for the "clear" button.
- the pluralize snippet can also be pulled out into a utility method
- I also tend to favor this syntax: m("input#new-todo[placeholder='What needs to be done?']") if the value of the attribute is static (line 18)
Looks pretty painful, but I do think adapting JSX could be a pretty painless solution so I don't look at it as a deal breaker. I am still yet to find a javascript templating solution that I don't have at least 1 or 2 issues with.