Question

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

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

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

<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的模型，然后转换到SelectedProductsRoute并让它重新渲染模板。

我想相信这是一个了不起的框架，但我只是不停地撞墙。

安德鲁

Answer 1

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

使用needs属性连接控制器。如下所示：

//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

Ember.js网点和路线

1 个答案: