{"action":"created","issue":{"url":"https://api.github.com/repos/riot/riot/issues/1218","labels_url":"https://api.github.com/repos/riot/riot/issues/1218/labels{/name}","comments_url":"https://api.github.com/repos/riot/riot/issues/1218/comments","events_url":"https://api.github.com/repos/riot/riot/issues/1218/events","html_url":"https://github.com/riot/riot/issues/1218","id":106514015,"number":1218,"title":"Proposal: Multiple yield points","user":{"login":"Centaur","id":265524,"avatar_url":"https://avatars.githubusercontent.com/u/265524?v=3","gravatar_id":"","url":"https://api.github.com/users/Centaur","html_url":"https://github.com/Centaur","followers_url":"https://api.github.com/users/Centaur/followers","following_url":"https://api.github.com/users/Centaur/following{/other_user}","gists_url":"https://api.github.com/users/Centaur/gists{/gist_id}","starred_url":"https://api.github.com/users/Centaur/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Centaur/subscriptions","organizations_url":"https://api.github.com/users/Centaur/orgs","repos_url":"https://api.github.com/users/Centaur/repos","events_url":"https://api.github.com/users/Centaur/events{/privacy}","received_events_url":"https://api.github.com/users/Centaur/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/riot/riot/labels/discussion","name":"discussion","color":"ff44aa"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-09-15T09:05:08Z","updated_at":"2015-09-16T23:24:08Z","closed_at":null,"body":"The goal is to define a custom tag that contains some nested custom tags at different positions. For example: \r\n\r\n```html\r\n<my-form>\r\n    <yield partial=\"inputs\"/>\r\n    <div class=\"form-group\">\r\n        <div class=\"col-sm-offset-2 col-sm-10\">\r\n            <yield partial=\"buttons\"/>\r\n        </div>\r\n    </div>   \r\n</my-form>   \r\n``` \r\n\r\nnow with these tags: \r\n\r\n```html\r\n<myInput>\r\n    <input type=\"{opts.variant}\"/>\r\n</myInput>\r\n\r\n<myButton>\r\n    <Button>{opts.title}</Button>\r\n</myButton>\r\n```\r\n\r\nwe can use the `myForm` tag like this:\r\n\r\n```html\r\n<myForm>\r\n    <partial name=\"inputs\">\r\n          <myInput variant=\"password\"/>\r\n          <myInput variant=\"email\"/>\r\n    </partial>\r\n    <partial name=\"buttons\">\r\n          <myButton title=\"Submit\"/>\r\n          <myButton title=\"Cancel\"/>\r\n     </partial>\r\n</myForm>\r\n```\r\n\r\nit should be rendered as:\r\n\r\n```html\r\n<myForm>\r\n    <myInput><input type=\"password\"/></myInput>\r\n    <myInput><input type=\"email\"/></myInput>\r\n    <div class=\"form-group\">\r\n        <div class=\"col-sm-offset-2 col-sm-10\">\r\n            <myButton><Button>Submit</Button></myButton>\r\n            <myButton><Button>Cancel</Button></myButton>\r\n        </div>\r\n    </div>   \r\n</myForm>   \r\n```\r\n\r\nIn ReactJS world, this can be covered by the [higher order component](http://stackoverflow.com/a/31564812/448141) pattern. But I didn't find a way to achieve this easily in riot. "},"comment":{"url":"https://api.github.com/repos/riot/riot/issues/comments/140924642","html_url":"https://github.com/riot/riot/issues/1218#issuecomment-140924642","issue_url":"https://api.github.com/repos/riot/riot/issues/1218","id":140924642,"user":{"login":"cognitom","id":16032,"avatar_url":"https://avatars.githubusercontent.com/u/16032?v=3","gravatar_id":"","url":"https://api.github.com/users/cognitom","html_url":"https://github.com/cognitom","followers_url":"https://api.github.com/users/cognitom/followers","following_url":"https://api.github.com/users/cognitom/following{/other_user}","gists_url":"https://api.github.com/users/cognitom/gists{/gist_id}","starred_url":"https://api.github.com/users/cognitom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cognitom/subscriptions","organizations_url":"https://api.github.com/users/cognitom/orgs","repos_url":"https://api.github.com/users/cognitom/repos","events_url":"https://api.github.com/users/cognitom/events{/privacy}","received_events_url":"https://api.github.com/users/cognitom/received_events","type":"User","site_admin":false},"created_at":"2015-09-16T23:24:08Z","updated_at":"2015-09-16T23:24:08Z","body":"How about the child-tag solution?\r\nI don't think it needs multiple yield in this case.\r\n\r\n```html\r\n<myForm>\r\n  <myInput variant=\"password\"/>\r\n  <myInput variant=\"email\"/>\r\n  <myform-group>\r\n    <myButton title=\"Submit\"/>\r\n    <myButton title=\"Cancel\"/>\r\n  </myform-group>\r\n</myForm>\r\n```\r\n\r\n@Centaur as my understanding \"Higher-Order Component\" resolves the problems of mixins in ES6. How does it help in this case? Just curious."}}