emberjs中渲染和视图关键字的区别?
Posted
技术标签:
【中文标题】emberjs中渲染和视图关键字的区别?【英文标题】:Difference between render and view keyword in emberjs? 【发布时间】:2014-04-17 14:02:01 【问题描述】:您什么时候使用render "viewGoesHere" content
和view App.viewGoesHereView contentBinding="this"
?
我正在尝试动态更改单击侧栏菜单中的不同链接时要呈现的模板。但是上述两种方法只有在第一次单击链接(来自侧边栏)时才会更改为正确的模板。之后点击的任何链接都会生成与第一次生成的模板相同的模板。
tl;dr:单击侧栏中的不同链接时,我的模板不会动态更改。
这是我的看法:
App.ViewGoesHereView = Ember.View.extend(
templateName: function()
var templateName = 'baseTemplate';
var value = this.get('controller.model.Name');
if (Ember.compare(value, 'abc') === 0)
templateName = 'abcTemplate';
return templateName;
else if (Ember.compare(value, 'xyz') === 0)
templateName = 'xyzTemplate';
return templateName;
return templateName;
.property('controller.model.Name'),
);
我基本上是根据当前模型中的名称获得正确的模板,并且我可以在 templateName 变量中获得正确的名称,但它不会呈现。
【问题讨论】:
@SamSelikoff view App.ContentItemView contentBinding="this" 我把我的工作代码放在下面。但我无法理解计算属性没有动态更新 value 变量? 【参考方案1】:在您的代码示例中,您尝试将templateName
属性连接到controller.model.Name
,正如您所说,这种方法第一次起作用,但余烬视图仅第一次使用templateName
属性。即如果 templateName
在视图渲染后发生变化,它不会重新渲染视图。如果您希望您的方法发挥作用,您将需要在每次依赖属性更改时重新渲染视图。
//sample
App.ViewGoesHereView = Ember.View.extend(
templateName: function()
var templateName = 'baseTemplate';
var value = this.get('controller.model.Name');
if (Ember.compare(value, 'abc') === 0)
templateName = 'abcTemplate';
return templateName;
else if (Ember.compare(value, 'xyz') === 0)
templateName = 'xyzTemplate';
return templateName;
return templateName;
.property('controller.model.Name'),
//new property to re-render the view
reRenderView: function ()
this.rerender();
.observes('controller.model.Name')
);
注意:我没有测试过这段代码,因为我没有你的场景的完整用例。如果这不起作用,请恢复。
【讨论】:
【参考方案2】:我意识到value ('controller.model.Name')
不会在每次点击侧边栏中的新链接时更新。所以我插入了一个 jquery 函数来在每次点击时获取更新的名称,并将其分配给 value 变量。
App.ViewGoesHereView = Ember.View.extend(
templateName: function()
var templateName = 'baseTemplate';
var val = this.get('controller.model.Name');
var value;
$(document).ready(function ()
$('li').click(function ()
val = ($(this).text());
);
);
value = val;
if (Ember.compare(value, 'abc') === 0)
templateName = 'abcTemplate';
return templateName;
else if (Ember.compare(value, 'xyz') === 0)
templateName = 'xyzTemplate';
return templateName;
return templateName;
.property('controller.model.Name'),
);
【讨论】:
以上是关于emberjs中渲染和视图关键字的区别?的主要内容,如果未能解决你的问题,请参考以下文章