{"action":"created","issue":{"url":"https://api.github.com/repos/yoshuawuyts/choo/issues/309","repository_url":"https://api.github.com/repos/yoshuawuyts/choo","labels_url":"https://api.github.com/repos/yoshuawuyts/choo/issues/309/labels{/name}","comments_url":"https://api.github.com/repos/yoshuawuyts/choo/issues/309/comments","events_url":"https://api.github.com/repos/yoshuawuyts/choo/issues/309/events","html_url":"https://github.com/yoshuawuyts/choo/issues/309","id":187195745,"number":309,"title":"Using Choo to create reusable widgets?","user":{"login":"dannief","id":6110488,"avatar_url":"https://avatars.githubusercontent.com/u/6110488?v=3","gravatar_id":"","url":"https://api.github.com/users/dannief","html_url":"https://github.com/dannief","followers_url":"https://api.github.com/users/dannief/followers","following_url":"https://api.github.com/users/dannief/following{/other_user}","gists_url":"https://api.github.com/users/dannief/gists{/gist_id}","starred_url":"https://api.github.com/users/dannief/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dannief/subscriptions","organizations_url":"https://api.github.com/users/dannief/orgs","repos_url":"https://api.github.com/users/dannief/repos","events_url":"https://api.github.com/users/dannief/events{/privacy}","received_events_url":"https://api.github.com/users/dannief/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-11-03T21:30:30Z","updated_at":"2016-11-03T22:40:53Z","closed_at":null,"body":"I wanted to see if I could use choo to create a widget that I can add to any HTML page. I had the following requirements:\r\n\r\n1. Ability to pass in options to customize the created DOM element\r\n2. Imperatively call methods on the element to trigger actions \r\n3. Handle events triggered by the element\r\n4. Have more than once instance of the element on a page\r\n\r\nWas choo built to handle this? I noticed that all examples require the router to configured for example. I would not need this and I am interested to know if choo can be used without it. What I would want to use is the model and the view functionality.\r\n\r\nI hacked together a POC of how this could be done. You can look at the jsbin [here](http://jsbin.com/najuna/edit?html,js,output).  It works but, as I said it's kind of hacky. My problem was really that I needed to get access to the `send` function, to be able to attach it to the element instance, in order to be able to call a function on the rendered element. The only way I could think to do it was to expose the `send` function outside of the main view. \r\n\r\nSo, is there a better way?\r\n\r\nBy the way, great framework. It's really fun!\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/yoshuawuyts/choo/issues/comments/258295684","html_url":"https://github.com/yoshuawuyts/choo/issues/309#issuecomment-258295684","issue_url":"https://api.github.com/repos/yoshuawuyts/choo/issues/309","id":258295684,"user":{"login":"rollymaduk","id":2770715,"avatar_url":"https://avatars.githubusercontent.com/u/2770715?v=3","gravatar_id":"","url":"https://api.github.com/users/rollymaduk","html_url":"https://github.com/rollymaduk","followers_url":"https://api.github.com/users/rollymaduk/followers","following_url":"https://api.github.com/users/rollymaduk/following{/other_user}","gists_url":"https://api.github.com/users/rollymaduk/gists{/gist_id}","starred_url":"https://api.github.com/users/rollymaduk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rollymaduk/subscriptions","organizations_url":"https://api.github.com/users/rollymaduk/orgs","repos_url":"https://api.github.com/users/rollymaduk/repos","events_url":"https://api.github.com/users/rollymaduk/events{/privacy}","received_events_url":"https://api.github.com/users/rollymaduk/received_events","type":"User","site_admin":false},"created_at":"2016-11-03T22:40:53Z","updated_at":"2016-11-03T22:40:53Z","body":"Hey I did something similar in my app, I have a wrapper utility function that injects child views into a parent view, that way I can separate my components from a parent template view and still use the router. It also allows my setup a pre-route and post route hook. I can also have different parent views for different routes like different layouts if i want.\r\n**util.js**\r\n\r\n```\r\nexport const loadPage= (parent:Function,child:any)=>(...args:any)=>{\r\n//pre-route function here, post route can be added as callbacks in the args\r\n  return parent(...args,child(...args))\r\n}\r\n\r\n```\r\n\r\n**main.js**\r\n```\r\nexport function main (state, prev, send,child)\r\n{\r\nreturn html '<div>${child}</div>'\r\n}\r\n```\r\n\r\n**child.js**\r\nexport const child=function(state,prev,send){\r\nreturn html '<div>I am a child</div>'\r\n}\r\n\r\n**app.js**\r\n```\r\nimport {child} from \"child.js\"\r\nimport {main} from \"main.js\"\r\nimport {loaPage} from \"util.js\"\r\nconst app= require(\"choo\")()\r\n\r\napp.router(\"/\",(route) => [\r\n  route('/',loadPage(main,child))\r\n]\r\nconst tree = app.start()\r\ndocument.body.appendChild(tree)\r\n```\r\n"}}
{"actor":{"display_login":"rollymaduk"}}