Question

我正在玩Ember，并建立一个基本的联系管理应用程序来学习Ember。我正在关注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
        });
    }
});

基本上，我有一个名为'users'的模板，我想重用它。此模板列出了所有用户。我有一个排序按钮，单击该按钮时，只会显示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>

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

Answer 1

我想在你的情况下重复使用模板，你应该尝试使用partial，看看here.

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

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

然后使用partial帮助器呈现它

{{partial users}}

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

希望它有所帮助。

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

1 个答案: