0

I have a list of users which are displayed in a master view on the left side (Twitter Bootstrap CSS). Details of each user can be shown by clicking the show button. They will be displayed on the right side (detail).

How can I remove the show button for the currently displayed user? e.g. #/users/1 shouldn't render the show button for the first user.

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"
}]
4

1 回答 1

1

Ember provides some support for doing what you want. By default it sets the "active" css class on the selected element. You can find more information about that here: http://emberjs.com/api/classes/Ember.LinkView.html (note that the {{#linkTo}} is just a helper based on the LinkView).

The simplest way to override this behavior, since instead of "active" you want to hide the button, would be to make use of the hide class that comes with Twitter Bootstrap. So your users template would look like:

<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>
于 2013-04-12T15:30:23.920 回答