# How do I fake "Dynamic Outlets"? **URL:** \ **Category:** Design\ **Created:** [June 25, 2013, 8:28pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627 "2013-06-25T20:28:19Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\ **Post date:** [June 25, 2013, 8:28pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/1 "2013-06-25T20:28:20Z")
The issue that I’m trying to work around is getting a view to render in a Leaflet popup, which is created like this: ``` var popup = new L.Popup(), marker = new L.Marker(latlng); popup.setContent("html and content here"); marker.bindPopup(popup); ``` What I need to do is update the popup content every time the view is updated with new data. * * * I was doing the follow: ``` contentUpdated: function () { //..update popup using this.$().html() }.observes("controller.content.@each") ``` But this does not give me the latest `this.$()`, but the previous one, since the content doesn’t render at the same time that it changes. I know there is no way to do something like: ``` popup.setContent("{{outlet popup}}"); ``` What are my options? Are dynamic outlets in the future of ember, or do I have to go about this in a jQueryish way? ---
**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\ **Post date:** [June 28, 2013, 1:10pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/2 "2013-06-28T13:10:27Z")
Looks like this approach might be helpful: > Although, I don’t think copying html is very Emberish, especially since I’ll need events later on. Any suggestions, is there a way to make a view and instance of `L.Popup` and also `Ember.View`? Looking for any ideas at all. ---
**Author:** ![wycats](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/wycats/32/14179_2.png) [@wycats](https://discuss.emberjs.com/u/wycats)\ **Post date:** [July 2, 2013, 10:56pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/3 "2013-07-02T22:56:55Z")
Can you explain what about the normal outlet approach doesn’t work for your case? ---
**Author:** ![gunn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gunn/32/14511_2.png) [@gunn](https://discuss.emberjs.com/u/gunn)\ **Post date:** [July 2, 2013, 11:34pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/4 "2013-07-02T23:34:22Z")
I’m not positive, but I think the question boils down to this - [http://jsbin.com/erepas/1/edit](http://jsbin.com/erepas/1/edit) Given that you just provide a simple string to set popup content, how can you make that content bindable like a normal template? ---
**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\ **Post date:** [July 3, 2013, 1:41am UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/5 "2013-07-03T01:41:28Z")
> [@gunn](#): > > Given that you just provide a simple string to set popup content, how can you make that content bindable like a normal template? Yeah, basically along those lines, although not limited to a string, could be jQuery object or just DOM elements, since I could extend the `L.Popup` class, since at the core it’s setting DOM elements via `innerHTML` and `appendChild` ([see here](https://github.com/Leaflet/Leaflet/blob/master/src/layer/Popup.js#L175)). This is what I’m [doing now](https://gist.github.com/knownasilya/5917601/521a150c3b4584b17915643dea80e5ba3d771657) or [this](https://gist.github.com/knownasilya/5917601/756bf96c58fdb66bbf8706941db2bb4283950330), and this “works”, except that the events are no longer bound, and I’m sure bindings are broken. I can also do something like this: ``` mapPopupOpen: function (event) { App.PopupView.create({}).appendTo($(".leaflet-popup-content")); } ``` But that gives me the following error (the templates are still inserted), since I’m trying to insert a `Ember.View` into a parent view. > Assertion failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead. Although, the same happens if I try to `appendTo` am `Ember.ContainerView` instance. I’m assuming it wants the container to be appended either using `{{view}}` or via an `{{outlet}}`. ---
**Author:** ![kylen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kylen/32/14708_2.png) [@kylen](https://discuss.emberjs.com/u/kylen)\ **Post date:** [July 4, 2013, 10:02am UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/6 "2013-07-04T10:02:41Z")
@knownasilya I’ve just been looking at the same problem - using a view for a leaflet.js popup where the popup content must be explicitly set through setContent. Not sure of a solid Ember idiomatic approach but what seems to work for me is a hacky approach very similar to what you’re doing - - render the PopupView inside a hidden div - on popupopen: - store the view $().parent() in $parent so we have the original parent - view.$().detach() and store in $content - setPopupContent($content.get(0)) - on popupclose: - setPopupContent(‘’) - $parent.append($content.get(0)) The idea being that at any point the view elements are in the DOM, we just move them into the popup container and then back out again when the popup is closed. This appears to work and keep the bindings, events, etc but is not thoroughly tested. ---
**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\ **Post date:** [September 4, 2013, 3:52pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/7 "2013-09-04T15:52:09Z")
I wonder if there is a better way to do this now. I keep stumbling on use-cases that use this kind of content handling (html content as a string). Here’s an example with [Google Maps InfoWindow](https://gist.github.com/knownasilya/6439916), although I get the following error: > DEPRECATION: Using the defaultContainer is no longer supported. [defaultContainer#lookup] see: [default\_container\_deprecation.md · GitHub](http://git.io/EKPpnA) **Edit** : Fixed that issue by using `hiddenPopup = this.container.lookup('view:popup');` (with set’s after instantiation) instead of `hiddenPopup = App.PopupView.create({..})` ---
**Author:** ![vanthome](https://avatars.discourse-cdn.com/v4/letter/v/8e7dd6/32.png) [@vanthome](https://discuss.emberjs.com/u/vanthome)\ **Post date:** [September 25, 2013, 6:41am UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/8 "2013-09-25T06:41:40Z")
I’m having a similar issue with wrapping ACE editor in an Ember view. Currently I use the “create(), appenTo() Pattern” but even if I do it within the parent view’s didInsertElement(), I get “Assertion failed: You cannot append to an existing Ember.View.” It works but I don’t like it. So far I haven’t found a better solution. ---
**Author:** ![elsurudo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/elsurudo/32/15420_2.png) [@elsurudo](https://discuss.emberjs.com/u/elsurudo)\ **Post date:** [February 10, 2014, 4:30pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/9 "2014-02-10T16:30:11Z")
I’ve got a similar issue. I’m using the Ember-Leaflet library (a wrapper that helps you dead with Leaflet in a more Ember-ish way). Unfortunately, it doesn’t support binding content in popups, so I am at a bit of a loss as to where to start with this. Any suggestions? ---
**Author:** ![vanthome](https://avatars.discourse-cdn.com/v4/letter/v/8e7dd6/32.png) [@vanthome](https://discuss.emberjs.com/u/vanthome)\ **Post date:** [February 10, 2014, 7:24pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/10 "2014-02-10T19:24:23Z")
I had problems since Ember 1.4 Beta 5 because the error broke my app. The best solution I could came up with so far is to put everything in components and create a template with the HTML you need dynamically in the view and compile it on the go. This however only works if you really do not modify the HTML once inserted on the DOM. ---
**Author:** ![elsurudo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/elsurudo/32/15420_2.png) [@elsurudo](https://discuss.emberjs.com/u/elsurudo)\ **Post date:** [February 10, 2014, 9:03pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/11 "2014-02-10T21:03:00Z")
This is a bit of an aside, but how does one render a handlebars template programatically, one-off? I’m trying `Ember.TEMPLATES['template_name'](myContext)`, but getting an error due to there not being some buffer object. All I really want it to render it into a string. ---
**Author:** ![vanthome](https://avatars.discourse-cdn.com/v4/letter/v/8e7dd6/32.png) [@vanthome](https://discuss.emberjs.com/u/vanthome)\ **Post date:** [February 10, 2014, 9:50pm UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/12 "2014-02-10T21:50:51Z")
liike this: ``` MyApp.MyView = Ember.View.extend({ template: Ember.Handlebars.compile('

{{blah}}

'), }) ``` Or you can even make the template a computed property and update it depending on your app state. ---
**Author:** ![elsurudo](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/elsurudo/32/15420_2.png) [@elsurudo](https://discuss.emberjs.com/u/elsurudo)\ **Post date:** [February 11, 2014, 8:32am UTC](https://discuss.emberjs.com/t/how-do-i-fake-dynamic-outlets/1627/13 "2014-02-11T08:32:18Z")
Yes, but I don’t have the template as a string. It’s already been compiled by my build tools, and is contained in the Ember.TEMPLATES object. What I want to do is _evaluate_ an already-existing template with a context of my choosing.