如何在Ember.Handlebars.compile之后更新视图?

时间:2014-03-30 13:44:39

标签: ember.js handlebars.js

我正在使用emberJS(没有Rails)并且在模板/ * .hbs中的不同文件中有模板

我使用ajax查询它们并编译模板。

    App.SetupTemplate = function(name) {              
            $.ajax( {url:"templates/"+name+".hbs", success: function(response) { 
            Ember.TEMPLATES[name] = Ember.Handlebars.compile(response);          
    } });                                                                        
    };                                                                           


    App.ProfileRoute = Ember.Route.extend({                                      
            setupController: function(controller) { App.SetupTemplate('profile'); 
    },                                                                           
    });         

如果我点击了ProfileRoute,它会编译模板,但不会在视图中自动更新。 但它适用于后来在同一路径上的点击,因为模板已经编译并且视图正确呈现。 我不知道如何使用transitionTo到相同的路线来实现它。

如何在首次点击时自动更新视图?

-Thanks。

1 个答案:

答案 0 :(得分:1)

在实际下载模板之前,您需要阻止转换

App.needsTemplate = function(name){
  return Ember.isEmpty(Ember.TEMPLATES[name]);
};
App.setupTemplate = function(name) {  
    return new Ember.RSVP.Promise(function(resolve, reject){

      if(!App.needsTemplate(name)){
        resolve();
      }   else {
        $.ajax( {url:"templates/"+name+".hbs"}).then(function(response){
            Ember.TEMPLATES[name] = Ember.Handlebars.compile(response);

            resolve();
         });
      }                                                                                           
    });
};


App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  },
  afterModel: function(model, transition){
    if(App.needsTemplate('index')){
      transition.abort();
      App.setupTemplate('index').then(function(){
        transition.retry();
      }); 
    } 
  }
});

http://emberjs.jsbin.com/OxIDiVU/340/edit