在Sproutcore中编写自定义控件2

Question

我对Sproutcore相当陌生，但我熟悉Handlebars。我已经阅读了Todo教程，并检查了其他一些示例。

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

作为示例，如果我有一个链接列表，我想用它来过滤下面的数据，我是否与事件相关？我知道在骨干你会使用事件和选择器：“点击链接”

任何帮助将不胜感激！

Answer 1

以下是演示应用程序列表。

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

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

希望这会有所帮助。

Answer 2

听起来好像你想要遍历一个对象列表并创建链接，当单击它时，它会调用一些有权访问原始对象的JavaScript代码。

目前，最简单的方法是将模板上下文绑定到新的自定义视图。 http://jsfiddle.net/67GQb/

模板：

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

应用程序代码：您可以在此的jsfiddle在行动中看到的一切

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 3

的另一种方式实现什么耶胡达上面做的是使用#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')); 
     } 
    }) 
});