Ember視圖模板作爲計算屬性

Question

我在更新Ember視圖上的模板屬性時遇到問題，它是一個計算屬性。

當視圖第一次加載並作爲屬性返回時，Ember會正確編譯模板，但是當後來更改依賴關係時，模板計算屬性不會更新。

這裏是上的jsfiddle一個例子：http://jsfiddle.net/VkJC3/

App=Em.Application.create(); 

App.MyView = Em.View.extend({ 
    toggle: true 
    ,template: function(){ 
     if (this.get('toggle')) { 
      return Em.Handlebars.compile('toggle is true') 
     } else { 
      return Em.Handlebars.compile('toggle is false') 
     } 
    }.property('toggle') 
}); 

theView= App.MyView.create(); 
theView.append('body'); 

Ember.run.later(function() { 
    console.log('later'); 
    theView.set('toggle',false); 
}, 2000); 
​ 

，關於如何實現這一點的任何其他的建議被理解。也許最好只把helper放到一個句柄模板中。

編輯：

這裏是示出將包含在上述Ember.View的Ember.CollectionView一個更完整的示例：http://jsfiddle.net/VkJC3/6/

的Ember.run.later之後，第一項應該改變從類型1到類型2，並具有計算出的模板屬性更新。

App=Em.Application.create(); 

App.MyView = Em.CollectionView.extend({ 
    content: [ 
     Em.Object.create({type: 1, data:"Maybe item type 1 is a link"}) 
     ,Em.Object.create({type: 2, data:"And item type 2 is a header"})] 

    ,itemViewClass: Em.View.extend({ 
     template: function(){ 
      if (this.get('content.type')==1) { 
       return Em.Handlebars.compile('<a href="#">{{view.content.data}}</a>') 
      } else if (this.get('content.type')==2) { 
       return Em.Handlebars.compile('<h1>{{view.content.data}}</h1>') 
      } 
     }.property('content.type') 
    }) 
}); 


theView= App.MyView.create(); 
theView.append('body'); 

Ember.run.later(function() { 
    console.log('later'); 
    theView.get('content')[0].set('type',2); 
}, 2000); 
    ​ 

Answer 1

這不是你應該如何設置模板。該模板不應該返回已編譯的模板，而應該作爲已編譯的模板。在你的代碼中，你試圖將模板本身設置爲一個計算屬性，並且你正在有條件地編譯兩個可能的模板。恕我直言，你應該編譯模板用結合，用以確定評估根據您的toggle屬性一文中，這樣的計算性能：

App = Em.Application.create(); 

App.MyView = Em.View.extend({ 
    template: Em.Handlebars.compile('toggle is {{toggleState}}'), 
    toggle: true, 
    toggleState: function(){ 
     if (this.get('toggle')) { 
      return 'set to \'true\''; 
     } else { 
      return 'set to \'false\''; 
     } 
    }.property('toggle') 
}); 

theView = App.MyView.create(); 
theView.append('body'); 

Ember.run.later(function() { 
    console.log('later'); 
    theView.set('toggle',false); 
}, 2000); 

見小提琴here

這隻會改變什麼需要被改變，所以你不必重新編譯模板。

編輯：

我做了一些修改小提琴（你可以看到它here）。

我在做什麼，而不是直接分配template財產，我編譯模板Ember.TEMPLATES集合創建應用程序之前，（我假設你會做這樣的事情在督促反正），和我」 m改變你的計算屬性返回模板的名稱取決於條件（在你的情況content.type），並且我綁定了計算屬性的templateName屬性。一旦模板發生變化，你的有到rerender你的看法。該代碼可以改進，但我會在這裏粘貼到演示解決方案：

(function() { 

    Em.TEMPLATES["one"] = Em.Handlebars.compile('<a href="#">{{view.content.data}}</a>'); 
    Em.TEMPLATES["two"] = Em.Handlebars.compile('<h1>{{view.content.data}}</h1>'); 

})(); 

App = Em.Application.create(); 

App.MyView = Em.CollectionView.extend({ 
    content: [ 
     Em.Object.create({type: 1, data:"Item type 1 is a link"}), 
     Em.Object.create({type: 2, data:"Item type 2 is a header"}) 
    ], 
    itemViewClass: Em.View.extend({ 
     templateNameBinding: 'currentTypeName', 
     currentTypeName: function() { 
      if (this.get('content.type') == 1) { 
       return "one"; 
      } else if (this.get('content.type') == 2) { 
       return "two"; 
      } 
     }.property('content.type'), 
     templateNameObserver: function() { 
      this.rerender(); 
     }.observes('templateName') 
    }) 
}); 
// ... rest of the code... 

就像我說的，這個代碼可以改善......希望這有助於