{"action":"created","issue":{"url":"https://api.github.com/repos/lhorie/mithril.js/issues/630","labels_url":"https://api.github.com/repos/lhorie/mithril.js/issues/630/labels{/name}","comments_url":"https://api.github.com/repos/lhorie/mithril.js/issues/630/comments","events_url":"https://api.github.com/repos/lhorie/mithril.js/issues/630/events","html_url":"https://github.com/lhorie/mithril.js/pull/630","id":79953381,"number":630,"title":"Support nested selectors in m() calls","user":{"login":"mindeavor","id":17013,"avatar_url":"https://avatars.githubusercontent.com/u/17013?v=3","gravatar_id":"","url":"https://api.github.com/users/mindeavor","html_url":"https://github.com/mindeavor","followers_url":"https://api.github.com/users/mindeavor/followers","following_url":"https://api.github.com/users/mindeavor/following{/other_user}","gists_url":"https://api.github.com/users/mindeavor/gists{/gist_id}","starred_url":"https://api.github.com/users/mindeavor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mindeavor/subscriptions","organizations_url":"https://api.github.com/users/mindeavor/orgs","repos_url":"https://api.github.com/users/mindeavor/repos","events_url":"https://api.github.com/users/mindeavor/events{/privacy}","received_events_url":"https://api.github.com/users/mindeavor/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":22,"created_at":"2015-05-23T21:05:41Z","updated_at":"2015-10-07T18:07:08Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/lhorie/mithril.js/pulls/630","html_url":"https://github.com/lhorie/mithril.js/pull/630","diff_url":"https://github.com/lhorie/mithril.js/pull/630.diff","patch_url":"https://github.com/lhorie/mithril.js/pull/630.patch"},"body":"Use case: I am currently in the process of converting an Angular + Foundation project over to Mithril. CSS frameworks like Foundation and Bootstrap make extensive use of elements with classes that have no other purpose than styling.\r\n\r\nNormally this would cause Mithril views to look convoluted, but I've found a solution to be particularly elegant: nested selectors in m() calls.\r\n\r\nHere are some real code snippet use cases taken from my project. The `m.x` you see is a view wrapper as described in the [extending the view language article](http://lhorie.github.io/mithril-blog/extending-the-view-language.html):\r\n\r\n```javascript\r\n// Simple example\r\nm.x('.form-group > label', [ // nested\r\n  \"Currency\",\r\n  m.x('select', { bindValue: form.currency }, ctrl.currencyOptions),\r\n]),\r\n\r\n// Complex example\r\nm.x('.form-group.row > .medium-5.columns', [ // nested\r\n  m.x('label > span', [ // nested\r\n    \"Minimum Donation Amount \",\r\n\r\n    // double nested!\r\n    m.x('.row.row-amount > .medium-5.amount-field.column > .input-group.clearfix', [\r\n      m('span.input-group-addon', currencySymbol),\r\n      m.x('input[type=text][maxlength=3]', { bindValue: form.min_amt })\r\n    ])\r\n  ])\r\n]),\r\n```\r\n\r\nAs you can see, this makes using css frameworks like Foundation quite palatable. It's also a strong argument for using JavaScript as a view template language.\r\n\r\nThe changes in this PR support this feature. Let me know what you think.\r\n\r\n**Edit:** Updated example to use new changes in PR"},"comment":{"url":"https://api.github.com/repos/lhorie/mithril.js/issues/comments/146280600","html_url":"https://github.com/lhorie/mithril.js/pull/630#issuecomment-146280600","issue_url":"https://api.github.com/repos/lhorie/mithril.js/issues/630","id":146280600,"user":{"login":"tivac","id":49545,"avatar_url":"https://avatars.githubusercontent.com/u/49545?v=3","gravatar_id":"","url":"https://api.github.com/users/tivac","html_url":"https://github.com/tivac","followers_url":"https://api.github.com/users/tivac/followers","following_url":"https://api.github.com/users/tivac/following{/other_user}","gists_url":"https://api.github.com/users/tivac/gists{/gist_id}","starred_url":"https://api.github.com/users/tivac/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tivac/subscriptions","organizations_url":"https://api.github.com/users/tivac/orgs","repos_url":"https://api.github.com/users/tivac/repos","events_url":"https://api.github.com/users/tivac/events{/privacy}","received_events_url":"https://api.github.com/users/tivac/received_events","type":"User","site_admin":false},"created_at":"2015-10-07T18:07:08Z","updated_at":"2015-10-07T18:07:08Z","body":"@mindeavor I'm not in favor of putting it in core because it's easily handled as either a view extension or a build tool and I think core should stay as tiny as humanly possible. I think it's a useful idea that I can take advantage of by opting into it instead of having it always available even when I don't want it.\r\n\r\nIf you don't want it as a build tool then a run-time view extension like you mentioned you had already built seems perfect. Is that public somewhere?"}}