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从模型移动到控制器，更适合它的位置。 将示例从“帖子和评论”更改为“订单和项目”。

UPDATE2： 我已经添加了输入字段“搜索”，我可以检索其为了控制值。但我不相信这是处理物品搜索的地方，是吗？

Answer 1

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

但是，这并不使用each在订单hasMany项目了。 取而代之的是每个订单都有物品资源，/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(); 
     } 
    } 
});