sproutcore - 在 Sproutcore 2 中编写自定义控件

Question

我对 Sproutcore 还很陌生，但我对 Handlebars 很熟悉。我浏览了 Todo 教程并查看了其他一些示例。

我喜欢它的一切，并希望在 Backbone 上使用它，但我很难理解如何连接自定义控件。我可以看到一些数据将在绑定中发挥作用，但会触发我迷失的事件。

举个例子，如果我有一个链接列表，我想用它来过滤它下面的数据，我如何绑定到事件中？我知道在主干中您会使用事件和选择器：“click .link”

任何帮助将不胜感激！

Answer 1

听起来您想遍历对象列表并创建链接，单击这些链接会调用一些可以访问原始对象的 JavaScript 代码。

目前，最简单的方法是将模板上下文绑定到新的自定义视图。你可以在这个 JSFiddle 上看到一切在行动：http: //jsfiddle.net/67GQb/

模板：

{{#each App.people}}
    {{#view App.PersonView contentBinding="this"}}
    <a href="#">{{content.fullName}}</a>
    {{/view}}
{{/each}}

应用代码：

App = SC.Application.create();

App.Person = SC.Object.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName') 
});

App.people = [
    App.Person.create({ firstName: "Yehuda", lastName: "Katz" }),
    App.Person.create({ firstName: "Tom", lastName: "Dale" })
];

App.PersonView = SC.View.extend({
    mouseDown: function() {
        // Note that content is bound to the current template
        // context in the template above.
        var person = this.get('content');
        alert(person.get('firstName'));
    }
});

也就是说，我们知道这有点麻烦，并且有一些想法可以进一步简化我们将在未来几周内开展的流程。

Answer 2

这是演示应用程序的列表。

http://blog.sproutcore.com/announcing-the-winners-of-the-demo-apps-contest/

这是我输入的我自己的开源演示应用程序的插件 - chililog。我正在 blog.chililog.org 上写关于我如何使用 sproutcore 的博客。

希望这可以帮助。

Answer 3

实现上述 Yehuda 的另一种方法是使用 #collection 指令：

模板代码：

{{#collection App.PeopleView contentBinding="App.people"}}
    <a href="#">{{content.fullName}}</a>
{{/collection}}

应用代码：

App = SC.Application.create();

App.Person = SC.Object.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName') 
});

App.people = [
    App.Person.create({ firstName: "Yehuda", lastName: "Katz" }),
    App.Person.create({ firstName: "Tom", lastName: "Dale" })
];

App.PeopleView = SC.CollectionView.extend({
    itemViewClass: SC.View.extend({
        mouseDown: function() {
            var person = this.get('content');
            alert(person.get('firstName'));
        }
    })
});