model-view-controller - Ember.js:如何访问 CollectionView 中的特定项目？

Question

首先我想说我真的很喜欢 ember.js。我已经尝试过 Knockout 和 Angular，但发现它们有点突兀，一切都必须按照自己的方式完成。我觉得 ember 让我有更多的自由来构建你认为合适的东西。话虽如此，我有几个问题。

1 。我想做类似以下的事情，这显然是行不通的:
<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>
相反，我必须创建一个绑定(bind):
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
如何在 View 中创建 url 路径？我可以轻松地在模型上创建一个名为 url 的计算属性，但这感觉很糟糕而且不是 MVC。我是否必须为元素创建一个新 View 或注册一个感觉有点麻烦的助手？

这是完整的代码:

App = Ember.Application.create();

var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ]

App.itemController = Ember.ArrayController.create({
    content: sampleData,
    removeItem: function(item) {
        this.content.removeObject(item);
    }
});

App.ItemListView = Ember.View.extend({
    itemDetailView: Ember.CollectionView.extend({
        contentBinding: 'App.itemController',
        itemViewClass: Ember.View.extend({
            tagName: 'li',
            url: '' // HOW TO GET '/item/123456789'
            deleteButton: Ember.Button.extend({
                click: function(event) {
                    var item = this.get('content');
                    App.itemController.removeItem(item);
                }
            })
        })
    })
});

<script type="text/x-handlebars">
    {{#view App.ItemListView}}
        <ul id="item-list">
            {{#collection itemDetailView}}
                <div class="item">
                    <a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
                    {{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}}
                </div>
            {{/collection}}
        </ul>
    {{/view}}
</script>

2 。我觉得 View “拥有” Controller ，而不是相反。 View 不应该不知道它连接到哪个 Controller ，以便您可以重用 View 吗？我正在考虑这些到 View 中的行:
contentBinding: 'App.itemController',
和
App.itemController.removeItem(item);
你如何构建这个？

3 。我意识到一切都在进行中，并且随着名称的更改而变得非常新，除了文档之外的所有内容都不清楚。这些示例使用旧的命名空间 SC，与 Sproutcore 2.0 指南相比，emberjs.com 上缺少很多东西，例如集合、数组 Controller 。我在这里的某个地方读到，收藏品将被逐步淘汰。这是真的吗？我应该使用#each 来代替吗？

感谢您的帮助和一个很棒的框架!

Answer 1

1.) 如果你想使用 <a href="..."> ，您将需要一个计算属性。它可能在您的模型上或 View 上。另一种技术是使用 Ember.Button:{{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}
2.) 通常你会想要在模板中声明你的 Controller 绑定(bind)，而不是在 View 中。例如:{{#view App.ItemListView contentBinding="App.itemController"}}
3.) #collection helper 可能会被弃用，所以你应该使用 #each反而。