Emberjs - unable to redefine named, explicitly compiled Handlebars template

Question

As part of an attempt to port a fairly large/complex existing application to the Ember world, I'm generating and compiling named Handlebars templates dynamically, and associating views with them, using the technique:

var template = Ember.Handlebars.compile("some handlebars stuff");
Ember.TEMPLATES["myTemplate"] = template;

var view = Ember.View.create({
  templateName: "myTemplate"
});

One of the things I'd like to do is be able to recompile new/different Handlebars template markup which overwrites the template named "myTemplate" and have it be accessible to views at that name.

I'm getting unexpected results trying to do this - a couple fiddles that illustrate the problems:

First fiddle - Shows what happens if you wait before rendering a view after the named template contents have changed.

Second fiddle - Shows what happens if there's no delay before rendering a view after the named template contents have changed.

There's obviously some magic under the hood that I'm not understanding. Can anyone shed some light on this?

UPDATE:

I went through the source code for Ember.View and the container module, and came to realize that I could solve the problem in the First fiddle by overriding the "template" computed property in a way that skips the container cache lookup. I've put up another fiddle here to demonstrate the solution I found.

This seems to be working the way I'd like it to - but - it feels like I might be fighting with the framework and "unhooking" from the container in a way that might bite me later. Is there a better, more Ember-esque way to accomplish what I'm trying to do? Will the hack I found break things?

UPDATE 2

I've also discovered that it's also possible to simply call

view2.get('container').reset();

before appending view2 in the First fiddle. Seems cleaner/safer, but is it "legal"? I've updated the First fiddle to illustrate this.

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-03-25T04:06:58

(in the second fiddle, both views show the second template)

This is because view1.appendTo($("#target")); just schedules the append, actual view rendering does not happen until end of the run loop. Before that happens, you've set Ember.TEMPLATES["myTemplate"] = template2;

(in the first fiddle, both views show the first template)

Pretty sure this is because ember container caches template fx, but not 100% on that. Checking...

Emberjs - unable to redefine named, explicitly compiled Handlebars template

2 Answers