Question

我可能使用这一切都错了，但是：

我有一个表示产品集合的ArrayController。每个产品都会被渲染，用户可以采取多种操作，例如编辑产品标题或从不同的产品中复制描述。

问题是：您如何与您正在使用的特定产品的控制器进行交互？控制器如何知道正在编辑哪个产品？

我还尝试创建一个Ember.Select，并将selectionBinding设置为“controller.somevar”，但也失败了。

Answer 1

我认为你需要做的最重要的事情就是首先将尽可能多的逻辑从视图转移到控制器中。

在您的情况下另一件有用的事情是列表中的每个产品都有一个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}}

Answer 2

如果您在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>

Ember文档描述了itemController here：

您甚至可以定义一个可以动态决定项目控制器的函数lookupItemController（例如，可能基于模型类型）。

我在另一个模板/视图中渲染包含在ArrayController中的集合时发现的是#each的使用方式。确保您使用{{#each controller}}，因为Teddy Zeeny会显示您最终使用内容模型项目而不是项目控制器包装的项目。在您尝试使用旨在由项目控制器或其他基于控制器的内容修饰处理的操作之前，您可能不会注意到这一点。

当我需要在另一个视图中嵌套整个集合时，我使用视图助手按如下方式正确设置上下文，以便任何集合级别操作（例如添加项按钮操作）由数组控制器处理而不是由主要控制器由路线设置。

所以在我的产品模板中，我会做这样的事情来列出嵌套的供应商（假设你的'产品'路线恰当地'供应商'控制器）：

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

供应商模板遵循与上面显示的模板相同的模式。

Ember.js从视图调用arraycontroller

2 个答案: