如果Ember.js把手,否则声明

时间:2012-07-08 17:53:39

标签: javascript ember.js handlebars.js

我希望有人可以解释我在这里做错了什么。我使用带有把手模板的Ember.js,我已尝试了多种方法来获取把手#if else为我工作但它总是返回if和else的内容..这里' s我目前正在使用的代码。

App.js:

App = Ember.Application.create({
  selectedView: "Home",
  IsHome: function() {
    this.get('selectedView') === 'Home'
}.property('selectedView')

});

index.html head包含:

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

并在身体中:

<script type="text/x-handlebars">
{{#if App.IsHome}}
   {{view HomeView}}
{{else}}
  {{view editAccountView}}
{{/if}}
</script>

最终会在页面正文中显示两个视图。任何建议表示赞赏,

感谢 史蒂夫

2 个答案:

答案 0 :(得分:5)

问题的根本原因是Handlebars视图助手({{view MyView}})需要一个Ember“类”的路径参数,而不是类的实例。要创建视图类,请使用extend的{​​{1}}方法。 Handlebars视图助手将实例化您的视图类并将其附加到文档中。

有关Ember对象模型以及Ember Ember.Viewextend方法之间差异的更多信息,请参阅此帖子:http://ember-object-model.notlong.com

以下是您的示例,其中进行了一些更改以纠正我上面提到的观点。 http://jsfiddle.net/ethan_selzer/kcjzw/217/

此致

答案 1 :(得分:2)

这是因为您要使用homeView手动附加两个视图(editAccountViewappendTo)。

另外,避免在App create()函数中定义视图。因此,创建您的应用程序:

App = Ember.Application.create({
  ready: function() {
    App.MainView.create().append();
  }
});

其中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'
  })
});

使用把手模板:

<script type="text/x-handlebars" data-template-name="main-view">
  {{#if view.isHome}}
     {{view view.homeView}}
  {{else}}
    {{view view.editAccountView}}
  {{/if}}
</script>