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