javascript - Ember.js 每个助手不显示在条件中

Question

新手 Ember 用户 - 在模板中的条件语句中的每个循环中显示内容时遇到问题。如果没有条件，内容会正常列出。

我有以下模板:

 <script type="text/x-handlebars" data-template-name="application">
  {{view "App.MenuView" }}         
 </script>

  <script type="text/x-handlebars" data-template-name="menu">
  <div class="app-navbar">
   <ul class="app-nav">
   {{#link-to 'applications' tagName="li" href=false }}<a {{action "select_application" on="click"}} href="#nogo">Applications  <b class="caret"></b></a>  
    {{#if showApplications}}
    <ul class="app-subnav">
    {{#each view.content1}}
    <li ><a href="#" {{action "select"  this}}>{{title}}</a></li>
    {{/each}}
   </ul>
   {{/if}}
   {{/link-to}}
</script>

这是我的 View 和 Controller :

  App.MenuView = Ember.View.extend({
    templateName: 'menu',
    content1:[
        Ember.Object.create({title: 'google', href: 'google.com'}),
        Ember.Object.create({title: 'yahoo', href: 'yahoo.com'}),
        Ember.Object.create({title: 'bing', href: 'bing.com'})
    ]       
})

App.ApplicationController = Ember.ObjectController.extend({
  isActive : false,
  showApplications: false,
  actions:{
   select_application : function(e){
    this.toggleProperty('isActive');
    this.toggleProperty('showApplications');
  }
   select: function(e){
       console.log ('Do something here');
    }
  }
 })

Answer 1

这只是我的猜测，我不确定，但 {{#if}} 实际上是一个 View 。因此，view.content1 部分访问“IfView”(不知道其正确名称)。而这个 View 不具备这个属性。实际上我不建议以这种方式实现它。我自己已经完成了这种实现风格，这就是使用服务器端应用程序(它工作正常)的方式。

我会这样做:

<script type="text/x-handlebars" data-template-name="menu">
  <div class="app-navbar">
   <ul class="app-nav">
   {{#link-to 'applications' tagName="li" href=false }}<a {{action "select_application" on="click"}} href="#nogo">Applications  <b class="caret"></b></a>  

    <!-- Ember adds the class invisible when showApplications is false -->
    <ul {{bind-attr class=":app-subnav showApplications::invisible"}}>
    {{#each view.content1}}
    <li ><a href="#" {{action "select"  this}}>{{title}}</a></li>
    {{/each}}
   </ul>
   {{/link-to}}
</script>

为什么我认为这是更好的方法？当您切换属性以显示列表或不显示列表时，Ember 不必在此处进行任何渲染。 DOM 元素仍然存在，Ember 所要做的就是切换 HTML 属性，这要快得多。 这是一种更具声明性的做事方式，Ember 鼓励这种方式。

有关{{bind-attr}}的详细信息，您可以查看 docs .