0

ユーザーのテーブルであるusersテンプレートがあります。そのテーブルの下には、新しいユーザーを作成するためのリンクがあります。class="disabled"より良いUXのために、新しいユーザーの作成中にそのリンクを使用または非表示にして無効にしたいと思います。それを行う最善の方法は何ですか？

index.html

<script type="text/x-handlebars" data-template-name="users">
  <div class='row'>
    <div class='span7'>
      <table class='table table-striped'>
        <tbody>
          {{#each model itemController="user"}}
            <tr {{bindAttr class="isDirty:warning"}}>
              <td>{{lastName}}</td>
            </tr>
          {{/each}}
        </tbody>
      </table>
      <p>
        {{#linkTo 'users.new' classNames="btn btn-small"}}Create a new user{{/linkTo}}
      </p>
    </div>
    <div class='span5'>
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="users/new">
  <p><strong>Last name</strong><br>{{view Ember.TextField valueBinding=lastName}}</p>

  <p>
  {{#if isDirty}}
    <button {{action 'save' this}} class="btn btn-small">Save</button>
  {{else}}
    <button class="btn btn-small disabled">Save</button>
  {{/if}}
  </p>
</script>

app.js

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

App.UsersNewRoute = Ember.Route.extend({
  model: function() {
    return App.User.createRecord();
  },

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

App.UsersNewController = Ember.ObjectController.extend({
  save: function(model) {
    model.get('transaction').commit();
    App.Router.router.transitionTo('users.index')
  }  
});
4

1 に答える 1

2

考えられる解決策の 1 つは、usersController に「isCreating」のようなプロパティを追加することだと思います。これは、UsersNewRoute の activate フックで true に設定し、deactivate で false にリセットできます。これは次のようになります。

App.UsersNewRoute = Ember.Route.extend({

  activate: function() {
    this.controllerFor('users').set('isCreating', true);
  },

  deactivate: function() {
    this.controllerFor('users').set('isCreating', false);
  },

  model: function() {
    return App.User.createRecord();
  },

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

明らかに、テンプレートでこのプロパティを使用し、クラスをバインドしてボタンを非表示にします。

于 2013-05-06T21:32:56.953 に答える