0

現在Ember.jsをやって勉強中。Ember App Kitの使用。

私は基本的な関係を持っています-多くの「アイテム」を持つモデル「注文」。次の .hbs で注文とアイテムを表示します。

// templates/order.hbs
Order:{{info}}
Items:
{{#each items itemController="item"}}
  {{#if isEditing}}
    {{sku}}:
    {{input value=quantity focus-out='acceptChanges'}}
  {{else}}
    {{sku}}:
    <p {{action 'editItem' on='doubleClick'}}>
    {{quantity}}
    </p>
  {{/if}}
{{/each}}
{{input type="text" value=search action='query'}}

コントローラーは、これら 2 つのアクションを処理するだけです。

// controllers/item.js
export default Ember.ObjectController.extend({
    isEditing: DS.attr('boolean'),
    actions: {
        editItem: function () {
            this.set('isEditing', true);
        },
        acceptChanges: function () {
            this.set('isEditing', false);
            this.get('model').save();
        }
    }
});

そしてシンプルモデル。

// models/item.js
export default DS.Model.extend({
  order: DS.belongsTo('order', {async: true}),
  sku: DS.attr('string'),
  quantity: DS.attr('number'),
});

order.hbs からのクエリ アクションを処理する注文コントローラー。

// controllers/order.js
export default Ember.ObjectController.extend({
  actions: {
    query: function() {
      var q = this.get('search');
      Ember.Logger.log(q); // this prints value to console
      // TODO: somehow search for the item and set isEditing on it
    }
  }
}

これはすべて正常に機能します。

次の機能を追加したいと思います: order.hbs の入力フィールド。SKU を入力すると、対応するアイテムが編集用に (ダブルクリックを使用したようにインラインで) 開きます。どのように、どこで (どのコントローラーまたはビューで) これを行うのですか?

私の現在の ember.js の理解は、それが ArrayControllers またはビューと関係があることを示唆しています。しかし、私は同様の実装を見つけていません。

更新: isEditing をモデルからコントローラーに移動し、より適切な場所に移動しました。例を「投稿とコメント」から「注文とアイテム」に変更しました。

UPDATE2: 入力フィールド「検索」を追加しました。注文コントローラーでその値を取得できます。しかし、ここがアイテム検索を処理する場所だとは思いませんよね？

4

1 に答える 1

0

必要なものを実現するためにデザインを変更しました。

ただし、これはeach注文hasManyアイテムには使用されなくなりました。代わりに、注文ごとにアイテム リソースがあり、に/order/:idリダイレクトされる/order/:id/itemsため、UX は変わりません。

// router.js
var Router = Ember.Router.extend();     
Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
    this.resource('orders', function() {
        this.resource('order', {path: ':id'}, function() {
            this.resource('items');
        });
    });
});    
export default Router;

// routes/order.js
export default Ember.Route.extend({
    model: function(params) {
        return this.store.find('order', params.id);
    },
    redirect: function() {
        this.transitionTo('items');
    }
});

// routes/items.js
export default Ember.Route.extend({
    model: function() {
        var order = this.modelFor('order');
        return order.get('items');
    }
});

// templates/order.hbs
Order: {{info}}
{{outlet}}

// templates/items.hbs
<table>
    <tr>
        <th>SKU</th>
        <th>Quantity</th>
    </tr>
    {{#each}}
    <tr>
        <td>{{sku}}</td>
        {{#if isEditing}}
        <td>
              {{input value=quantity insert-newline='acceptChanges'}}
        </td>
        {{else}}
        <td {{action 'editItem' on='doubleClick'}}>
        {{quantity}}
        </td>
        {{/if}}
    </tr>
    {{/each}}
</table>
{{input type="text" value=searchItem action='query'}}

// controllers/items.js
export default Ember.ArrayController.extend({
    itemController: "item",
    actions: {
        query: function() {
            var si = this.get('searchItem');
            var x = this.findBy('sku', si);
            if (x) {
                x.set('isEditing', true);
                this.set('searchItem', '');
            }
        }
    },
});

// controllers/item.js
export default Ember.ObjectController.extend({
    isEditing: false,
    actions: {
        editItem: function () {
            this.set('isEditing', true);
        },
        acceptChanges: function () {
            this.set('isEditing', false);
            this.get('model').save();
        }
    }
});
于 2014-02-25T08:26:26.530 に答える