EmberJS重复使用相同的模板，但显示模板两次

我在玩Ember，并构建了一个基本的联系人管理应用来学习Ember。我遵循Emberjs入门指南。只有做一个“待办事项”的应用程序，我才会做我自己的事情，希望能够更好地完成它。EmberJS重复使用相同的模板，但显示模板两次

我的路由器和路由：

App.Router.map(function() { 
    this.resource('users', function() { 
     this.resource('user', { path: ':user_id' }); 
     this.route('motoDigitalTrue'); 
    }); 

    this.resource('about'); 
}); 

App.UsersRoute = Ember.Route.extend({ 
    model: function() { 
     return App.User.find(); 
    } 
}); 

App.UsersMotoDigitalTrueRoute = Ember.Route.extend({ 
    model: function(){ 
     return App.User.filter(function(user) { 
      if (user.get('motoDigital')) { 
       return true; 
      } 
     }); 
    }, 

    renderTemplate: function(controller) { 
     this.render('users', { 
      controller:controller 
     }); 
    } 
});

从本质上讲，我有一个名为“用户”，我想重用模板。该模板列出了所有用户。我有一个排序按钮，点击后只会显示motoDigitalTrue属性设置为true的用户。排序是正确的，但它只显示另一个Users模板，而不是重新填充原始模板。

我的用户模板：

<script type="text/x-handlebars" id="users"> 
    <div class="span10 tableContainer"> 
    <button class="btn btn-primary createUser" {{action createUser}}><i class="icon-plus icon-white"></i> Add a Contact</button> 
    <div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Sort<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     {{#linkTo 'users.motoDigitalTrue' activeClass="selected"}}Receiving MOTO Digital{{/linkTo}} 
    </ul> 
    </div> 
    <div class="tableScrollable"> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th class="nameHead">Name</th> 
      <th class="companyHead">Company</th> 
      <th class="emailHead">Email</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="name">&nbsp</td> 
      <td class="company">&nbsp</td> 
      <td class="email">&nbsp</td> 
     </tr> 
     {{#each model}} 

     <tr> 
      <td class="name"><i class="icon-user"></i> <strong>{{#linkTo 'user' this }}{{firstName}} {{lastName}}{{/linkTo}}</strong></td> 
      <td class="company">{{company}}</td> 
      <td class="email"><i class="icon-envelope"></i> <a {{bindAttr mailto="email"}}>{{email}}</a></td> 
     </tr> 
     {{/each}} 
     </tbody> 
    </table> 
    </div> 
    </div> 
    <div class="span3"> 
    {{#if isCreateUser}} 
     <div class="well"> 
       {{partial 'users/createUser'}} 
       <button {{action 'saveUser'}} class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button> 
     </div> 
    {{else}} 
     {{outlet}} 
    {{/if}} 
    </div> 
    </script>

我一直无法找到一个答案，任何帮助，将不胜感激！

来源

2013-07-12 mdance

我猜你的情况重用模板，你应该尝试使用partial，看看here.

例如，您users模板重命名为_users

<script type="text/x-handlebars" data-template-name='_users'> 
    ... 
</script>

，然后使用partial帮手来渲染它

{{partial users}}

请注意，{{partial}}将模板渲染为参数，并将该模板渲染到位。这意味着它不会更改上下文或范围。它只是使用当前范围呈现给定的模板。

希望它有帮助。

来源

2013-07-12 18:25:04 intuitivepixel

EmberJS重复使用相同的模板，但显示模板两次

回答

相关问题