Ember.js перейти к / выбрать элемент в списке / таблице по значению

Question

В настоящее время изучаю 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'}}

Контроллер просто обрабатывает эти два действия.

// 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 от модели к контроллеру, более подходящее место для него. Изменен пример с "посты и комментарии" на "заказы и товары".

ОБНОВЛЕНИЕ2: Я добавил поле ввода 'поиск', я могу получить его значение в контроллере заказа. Однако я не верю, что это место для поиска предметов, не так ли?

Answer 1

Я изменил дизайн, чтобы добиться того, что мне нужно.

Однако это не использует 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();
        }
    }
});