Ember.js按值跳转到/选择列表/表格中的项目

目前正在通过以下操作学习Ember.js。 使用

我有一个基本的关系-一个模型订单，它有许多项目。 我使用以下.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'}}

和简单的模型

// 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的理解表明它与ArrayController或视图有关。但我没有发现任何类似的实现

更新： 将iEdit从模型移动到控制器，这是更合适的位置。 将示例从帖子和评论更改为订单和项目

更新2：

---

我已经添加了输入字段“搜索”，我可以在order controller中检索它的值。然而，我不相信这是处理项目搜索的地方，是吗？

我改变了设计以实现我所需要的

然而，这并没有使用每一个订单上有许多项目了。 相反，每个订单都有items资源，/order/:id重定向到/order/:id/items，所以用户体验不会改变

// 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();
        }
    }
});

// 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();
        }
    }
});