Question

我有一个用户列表，显示在左侧的主视图中（Twitter Bootstrap CSS）。单击show按钮可显示每个用户的详细信息。它们将显示在右侧（细节）。

如何删除当前显示的用户的show按钮？例如#/users/1不应为第一个用户呈现show按钮。

的index.html

<script type="text/x-handlebars" data-template-name="users">
  <div class='row'>
    <div class='span4'>
      <table class='table table-striped'>
        {{#each model}}
          <tr>
            <td>{{lastName}}</td>
            <td>{{#linkTo 'user' this}}<button class="btn" type="button">show</button>{{/linkTo}}</td>
          </tr>
        {{/each}}
      </table>
    </div>
    <div class='span8'>
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="user">
  <h1>{{firstName}} {{lastName}}</h1>
</script>

app.js

App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
})

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

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

App.User = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string')
})

App.User.FIXTURES = [{
  id: 1,
  firstName: "Bill",
  lastName: "Clinton"
}, {
  id: 2,
  firstName: "Barack",
  lastName: "Obama"
}]

Answer 1

Ember为做你想做的事提供了一些支持。默认情况下，它会在所选元素上设置“活动”css类。您可以在此处找到有关此内容的更多信息：http://emberjs.com/api/classes/Ember.LinkView.html（请注意{{#linkTo}}只是基于LinkView的帮助程序。）

覆盖此行为的最简单方法，因为您要隐藏按钮而不是“活动”，而是使用Twitter Bootstrap附带的hide类。因此，您的用户模板将如下所示：

<script type="text/x-handlebars" data-template-name="users">
  <div class='row'>
    <div class='span4'>
      <table class='table table-striped'>
        {{#each model}}
          <tr>
            <td>{{lastName}}</td>
            <td>{{#linkTo 'user' this activeClass="hide"}}<button class="btn" type="button">show</button>{{/linkTo}}</td>
          </tr>
        {{/each}}
      </table>
    </div>
    <div class='span8'>
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="user">
  <h1>{{firstName}} {{lastName}}</h1>
</script>

标记主列表中的当前详细信息条目

1 个答案: