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

В настоящее время изучаю Ember.js на практике. Использование набора приложений Ember.

У меня базовое отношение - модель «Заказ», в которой много «Предметов». Я показываю заказ и товары со следующими .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, где можно было ввести артикул, и он открывал (встроенный, как если бы использовался двойной щелчок) соответствующий элемент для редактирования. Как и где (в каком контроллере или представлении) это делать?

Мое текущее понимание ember.js предполагает, что он имеет какое-то отношение к ArrayControllers или представлениям. Но я не нашел ничего похожего реализованного.

ОБНОВЛЕНИЕ: элемент isEditing перемещен из модели в контроллер, в более подходящее место для этого. Изменен пример с «сообщений и комментариев» на «заказы и товары».

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


ember.js ember-app-kit
person liepumartins    schedule 13.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Однако это больше не использует each для заказа hasMany элементов. Вместо этого для каждого заказа есть ресурс items, и /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();
        }
    }
});
person liepumartins    schedule 25.02.2014