Cleanup HTML attributes
Problem:
m('div', {foo: 'bar'}, 'hello');
// <div foo="bar">hello</div>
Solution:
var mainSection = {
view: function(ctrl, attrs, children) {
var sidebar = attrs.sidebar;
var sectionAttrs = _.omit(attrs, 'sidebar');
return m('section', sectionAttrs, [
m('div.sidebar', {}, sidebar),
m('div.main-content', {}, children)
])
}
}
// usage
m(mainSection, {sidebar: m(sidebarComponent), className: 'app-section'}, [
m('h1', 'Hello world')
])
Do not return null
from view
Problem: null
returned from view will rise an exception.
var Component = {};
Component.view = function(ctrl, opts) {
return (opts.foo == 'bar') ? m('div', 'Bar') : null;
}
// Error will be rised
m.render(document.body, m(Component));
Solution: place conditions to render nothing (null) outside of the component or, if it's imposible, return an empty tag (m('span', null)
).
var Component = {};
Component.view = function(ctrl, opts) {
return m('div', 'Bar')
}
m.render(document.body, foo == 'bar' ? m(Component) : null);