Ember.js:如何访问CollectionView中的特定项?

时间:2011-12-26 14:53:26

标签: model-view-controller ember.js

首先,我想说我真的很喜欢ember.js。我已经尝试了Knockout和Angular,但发现它们有点突兀,一切都必须按照自己的方式完成。我觉得像布尔允许我更自由地构建你认为合适的东西。有了这个说我有几个问题。

1 即可。我想做类似以下的事情,显然不起作用:

<a href="/item/{{ content.id }}"><h3>{{ content.name }}</h3></a>

相反,我必须创建一个绑定:

<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>

如何在视图中创建网址路径?我可以轻松地在模型上创建一个名为url的计算属性,但这感觉很糟糕而且不是很MVC。我是否必须为元素创建新视图或注册一个感觉有点麻烦的帮助器?

这是完整的代码:

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 即可。我觉得视图“拥有”控制器,而不是相反。视图是否应该不知道它连接到哪个控制器,以便您可以重用视图?我正在考虑这些视图中的线条:

contentBinding: 'App.itemController',

App.itemController.removeItem(item);

你如何构建这个?

第3 即可。我意识到一切都是正在进行的工作,而且名称发生了变化,所有这些都很新,但文档还不清楚。这些示例使用旧的命名空间SC,与Sproutcore 2.0指南相比,emberjs.com上缺少很多东西,例如集合,数组控制器。我在这里读到了收集将被淘汰的地方。这是真的,我应该使用#each吗?

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

1 个答案:

答案 0 :(得分:4)

1。)如果你想使用<a href="...">,你需要一个计算属性。它可以在您的模型上或视图上。另一种技术是使用Ember.Button:{{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}

2。)通常,您需要在模板中而不是在视图中声明控制器绑定。例如:{{#view App.ItemListView contentBinding="App.itemController"}}

3。)#collection助手可能会被弃用,因此您应该使用#each代替。

相关问题