当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);
任何关于如何实现这一点的其他建议都受到赞赏。也许最好把if助手放在一个车把模板中。
编辑：
下面是一个更完整的示例，显示了Ember. Collection View，它将包含上述Ember.View：http://jsfiddle.net/VkJC3/6/
在Ember.run之后，第一项应从类型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);
这不是您设置模板的方式。模板不应返回已编译的模板，而应充当已编译的模板。在代码中，您尝试将模板本身设置为计算属性，并且有条件地编译两个可能的模板。IMHO您应该编译一个模板，其中绑定到一个计算属性，该属性根据您的切换属性评估文本，如下所示：
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);
看小提琴在这里
这只会更改需要更改的内容，因此您不必重新编译模板。
编辑：
我对小提琴做了一些修改（你可以在这里看到）。
我正在做的是，不是直接分配模板属性，而是在创建应用程序之前将模板编译为Ember. TEMPLATES集合（我假设您无论如何都会在prod中执行类似的操作），并且我正在更改您的计算属性以根据条件返回要使用的模板的名称（在您的示例中为content.type），并且我正在绑定计算属性的templateName属性。一旦模板更改，您必须重新渲染您的视图。代码可以改进，但我将其粘贴在这里以演示解决方案：
(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...
就像我说的，这段代码可以改进…希望这有所帮助
