过去两周我一直在努力学习 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 的模型,然后转换到 SelectedProductsRoute 并让它重新渲染模板。
我想相信这是一个了不起的框架,但我一直在碰壁。
安德鲁