javascript Ember.js 车把 if, else 语句
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11385326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ember.js handlebars if, else statement
提问by SBignell
I'm hoping someone can explain what I'm doing wrong here. I'm using Ember.js with handlebars templates, I've tried a number of ways to get handlebars #if else working for me but it always returns both the contents of if and else.. Here's the code I'm currently using.
我希望有人能解释我在这里做错了什么。我正在使用 Ember.js 和把手模板,我尝试了多种方法来让把手 #if else 对我来说有效,但它总是返回 if 和 else 的内容。这是我目前使用的代码。
App.js:
应用程序.js:
App = Ember.Application.create({
selectedView: "Home",
IsHome: function() {
this.get('selectedView') === 'Home'
}.property('selectedView')
});
index.html head contains:
index.html 头部包含:
<script type="text/x-handlebars" data-template-name="home-view">
Hello, This is the home view.
</script>
<script type="text/x-handlebars" data-template-name="edit-account">
Hello, This is the account edit view.
</script>
and in the body:
在体内:
<script type="text/x-handlebars">
{{#if App.IsHome}}
{{view HomeView}}
{{else}}
{{view editAccountView}}
{{/if}}
</script>
This ends up showing both views in the body of the page. Any advice is appreciated,
这最终会在页面正文中显示两个视图。任何建议表示赞赏,
thanks Steve
谢谢史蒂夫
回答by Ethan Selzer
The fundamental reason for your problem is the Handlebars view helper ( {{view MyView}} ) expects a path parameter to an Ember “class”, not an instance of a class. To create a view class use the extend
method of Ember.View
. The Handlebars view helper will instantiate your view class and append it to the document for you.
问题的根本原因是 Handlebars 视图助手 ( {{view MyView}} ) 需要一个 Ember“类”的路径参数,而不是类的实例。要创建视图类,请使用 的extend
方法Ember.View
。Handlebars 视图助手将实例化您的视图类并将其附加到文档中。
See this post for more information on the Ember object model and the differences between Ember's extend
and create
methods: http://ember-object-model.notlong.com.
有关 Ember 对象模型以及 Emberextend
和create
方法之间差异的更多信息,请参阅此帖子:http: //ember-object-model.notlong.com。
Here is your example with a few changes made to correct the points I made above. http://jsfiddle.net/ethan_selzer/kcjzw/217/
这是您的示例,其中进行了一些更改以更正我上面提出的要点。http://jsfiddle.net/ethan_selzer/kcjzw/217/
Regards,
问候,
Ethan
伊森
回答by Panagiotis Panagi
That's because you are appending both views (homeView
and editAccountView
) manually with appendTo
.
那是因为您手动附加了两个视图(homeView
和editAccountView
)appendTo
。
Also, avoid defining views within the App create()
function. Therefore, create your App:
此外,避免在 Appcreate()
函数中定义视图。因此,创建您的应用程序:
App = Ember.Application.create({
ready: function() {
App.MainView.create().append();
}
});
where App.MainView
is your top-level view defined by:
App.MainView
您的顶级视图在哪里定义:
App.MainView = Ember.View.extend({
templateName: 'main-view',
selectedView: "Home",
isHome: function() {
this.get('selectedView') === 'Home'
},
homeView: Ember.View.extend({
templateName: 'home-view'
}),
editAccountView: Ember.View.extend({
templateName: 'edit-account'
})
});
with the handlebars template:
使用车把模板:
<script type="text/x-handlebars" data-template-name="main-view">
{{#if view.isHome}}
{{view view.homeView}}
{{else}}
{{view view.editAccountView}}
{{/if}}
</script>