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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:00:19  来源:igfitidea点击:

Ember.js handlebars if, else statement

javascriptember.jshandlebars.js

提问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 extendmethod 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 extendand createmethods: http://ember-object-model.notlong.com.

有关 Ember 对象模型以及 Emberextendcreate方法之间差异的更多信息,请参阅此帖子: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 (homeViewand editAccountView) manually with appendTo.

那是因为您手动附加了两个视图(homeVieweditAccountViewappendTo

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.MainViewis 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>