Ember.js arraycontroller從視圖調用

我可能會使用這一切都是錯誤的，但：Ember.js arraycontroller從視圖調用

我有一個ArrayController代表產品的集合。每個產品都得到渲染，用戶可以執行多個操作，例如編輯產品標題或從不同產品複製描述。

問題是：您如何與您正在使用的特定產品的控制器進行交互？控制器如何知道正在編輯哪個產品？

我也嘗試創建一個Ember.Select與selectionBinding設置爲「controller.somevar」，但也失敗了。

來源

2013-03-23 Andrei Serdeliuc

我認爲你需要做的最重要的事情是首先移動儘可能多的邏輯，你可以遠離視圖和控制器。

在您的情況下，另一件有用的事情是爲列表中的每個產品提供itemController。這樣，你可以在這個項目控制器中處理項目特定的邏輯。

我沒有足夠的信息來理解你的架構，所以我會做一些假設。

鑑於你有以下ProductsController：

App.ProductsController = Ember.ArrayController.extend();

您需要創建將創建包每個單品本身就是一個ProductController。

App.ProductController = Ember.ObjectController.extend();

你需要修改你的模板如下：

{{#each controller itemController="product"}} 
    <li>name</li> 
{{/each}}

現在列表中的所有產品都會有自己的ProductController，它可以處理一個產品的事件並且將作爲每一個列表上下文項目。

另一種選擇：

如果你只會在同一時間內處理一個產品，你可以使用路由來形容您正在使用該產品：

App.Router.map(function() { 
    this.resource('products', { path: '/products' }, function() { 
    this.resource('product', { path: '/:product_id' }, function() { 
     this.route('edit'); 
    }); 
    }); 
});

而對於編輯創建一個控制器產品：

App.ProductEditController = Ember.ObjectController.extend();

，然後將列表項目將鏈接到該產品的路線：

{{#each controller}} 
    <li>{{#linkTo "product.edit" this}}name{{/linkTo}}</li> 
{{/each}}

來源

2013-03-23 10:55:37

你先生太棒了！第一個解決方案工作，我不知道每個itemController。任何想法如何得到Ember.Select的contentBinding從ProductController上定義的函數提取內容？ – 2013-03-23 11:33:12

我不確定你的意思，Ember.Select位於'{{#each}}'裏面嗎？通常你會想讓這個函數成爲一個計算屬性'list：function（）{return this.get（'categories'）; } .property（'categories'）'然後'contentBinding ='list'' – 2013-03-23 11:45:41

如果定義在itemController你ProductsController你並不需要在您的模板指定細節：

App.ProductsController = Em.ArrayController.extend({ 
    itemController: 'product', 
    needs: ['suppliers'], 
    actions: { 
    add: function() { 
     // do something to add an item to content collection 
    } 
    } 
}); 

App.ProductController = Em.ObjectController.extend({ 
    actions: { 
    remove: function() { 
     // do something to remove the item 
    } 
    } 
});

使用集合模板是這樣的：

<button {{action="add"}}>Add Item</button> 
<ul> 
{{#each controller}} 
    <li>{{name}} <button {{action="remove"}}>x</button></li> 
{{/each}} 
</ul>

餘燼文檔介紹您可以定義一個函數lookupItemController它可以動態地決定物品控制器（例如基於模型類型）。

渲染包裹在另一個模板內的ArrayController集合時，我發現事情/視圖的使用方式#each。請確保您使用{{#each controller}}作爲Teddy Zeeny顯示，否則您最終將使用內容模型項目而不是項目控制器包裝項目。在嘗試使用旨在由物品控制器或其他基於控制器的內容裝飾處理的操作之前，您可能不會注意到這一點。

當我需要在另一個視圖中嵌套整個集合時，我按如下所示使用視圖助手來正確設置上下文，以便任何集合級別的動作（例如，添加項目按鈕動作）都由數組控制器處理，而不是由該路線設置的主控制器。

所以在我的產品模板，我會做這樣的事情列出嵌套的供應商（假設「產品」路線有正確的「供應商」控制器）：

{{view controller=controllers.suppliers templateName="products/suppliers"}}

的供應商模板只是跟隨與上面顯示的模板相同的模式。

來源

2014-05-06 03:44:06

Ember.js arraycontroller從視圖調用

回答

相關問題