Ember.js 出口和路线

Question

过去两周我一直在努力学习 Ember.js，但我真的很挣扎。我希望有一个“哈哈”的时刻，但我尝试实现的每一个新功能总是会导致数小时的测试失败。我只是似乎没有掌握框架。我觉得我正在反对它。我希望有人可以通过这个简单的例子来解释前进的道路。

我正在创建一个网络应用程序，允许用户选择他们将出售给客户的产品。有一个他们可以选择的产品列表，然后是他们选择的产品列表。

我想象一个带有导航控件的左栏和一个主栏，显示所选产品或他们可以添加到订单中的新产品。这是基本模板：

<script type="text/x-handlebars" data-template-name="pc">
    <div id="nav">{{outlet nav}}</div>
    <div id="main">{{outlet main}}</div>
</script>

这是左侧导航模板：

<script type="text/x-handlebars" data-template-name="nav">
    <div class="button">{{#linkTo "pc.add"}}Add Products{{/linkTo}}</div>
</script>

这里是选择的产品模板：

<script type="text/x-handlebars" data-template-name="selectedProducts">
    {{#each p in controller}}
        <div class="product">
            <h4>{{p.name}}</h4>
        </div>
    {{/each}}
</script>

这是可用的产品模板：

<script type="text/x-handlebars" data-template-name="addProducts">
    <div id="addProducts" class="addProducts">
        {{#each p in controller}}
            <div class="product">
                <h4>{{p.name}}</h4>
            </div>
        {{/each}}   
        <button {{action "addSelectedProducts"}}>Add Selected Products</button>
        <button {{action "back"}}>Back</button>
    </div>
</script>

我可以使用一些已选择的产品加载“pc”模板。伟大的。我还可以导航到“添加产品”模板。伟大的。但是当我单击“添加选定产品”时，我无法弄清楚如何将选定产品移动到“选定产品”模板后面的控制器/模型中，然后让该模板重新呈现以代替“添加产品”模板'。这真的是两个问题。如何从不同的控制器中更新另一个控制器的模型？而且，我如何从一个事件转换到另一个路由？

谁能告诉我你将如何设计路线和控制器？我知道这要求很多。我最感兴趣的是看看你如何响应 AppProductsController 中的事件，更新 SelectedProductsController 的模型，然后转换到 SelectedProductsRou​​te 并让它重新渲染模板。

我想相信这是一个了不起的框架，但我一直在碰壁。

安德鲁

Answer 1

如何从不同的控制器中更新另一个控制器的模型？

使用需求属性连接控制器。所以像：

//in AddProductsController
needs: ['selectedProducts']
addSelectedProducts: function() {
  // Now selectedProductsController can be accessed via the controllers property
  otherController = this.get('controllers.selectedProducts');
  // add the selected ones...
}

见http://emberjs.com/guides/controllers/dependencies-between-controllers/

我如何从一个事件转换到另一个路由？

//in AddProductsController
this.transitionToRoute('blogPosts');

见http://emberjs.com/api/classes/Ember.Controller.html#method_transitionToRoute