0

我正在玩 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
        });
    }
});

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

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

4

1 回答 1

1

我想在你的情况下重用模板，你应该尝试使用 a partial，看看这里。

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

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

然后使用partial助手渲染它

{{partial users}}

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

希望能帮助到你。

于 2013-07-12T18:25:04.433 回答