0

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

这是我的视图和控制器：

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

1 回答 1

2

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

我会这样做：

<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}}，您可以查看文档。

于 2013-09-29T19:56:36.237 回答