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从视图调用

回答

相关问题