在Sproutcore 2中编写自定义控件

本文介绍了在Sproutcore 2中编写自定义控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我对Sproutcore还是很陌生，但是我对Handlebars很熟悉.我已经浏览了Todo教程，还检查了其他一些示例.

我喜欢它的所有内容，并且希望在Backbone上使用它，但是我很难理解如何连接自定义控件.我可以看到某些数据将在绑定中发挥作用，但是触发事件让我迷失了.

举个例子，如果我有一个链接列表，我想用它来过滤下面的数据，我该如何绑定事件?我知道在骨干网中您将使用事件和选择器:"click .link"

任何帮助将不胜感激！

解决方案

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

目前，最简单的方法是将模板上下文绑定到新的自定义视图.您可以在此JSFiddle上看到所有运行中的内容: jsfiddle/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')); } });

也就是说，我们知道这有点麻烦，并且对于进一步简化我们将在接下来的几周内进行的工作流程有一些想法.

I'm fairly new to Sproutcore, but I am familiar with Handlebars. I have walked through the Todo tutorial and checked out a few other samples as well.

I love everything about it and would like to use it over Backbone, but I am having a hard time understanding how to wire up custom controls. I can see where some of the data will play into the bindings, but triggering events I get lost in.

As an example, if I had a link list that I would like to use to filter data below it, how to do I tie into the events? I know in backbone you would use the event and selector: "click .link"

Any help would be greatly appreciated!

解决方案

It sounds like you want to loop through a list of objects and create links that, when clicked, calls some JavaScript code that has access to the original objects.

At the moment, the easiest way to do that is to bind the template context to a new custom view. You can see everything in action at this JSFiddle: jsfiddle/67GQb/

Template:

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

App Code:

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')); } });

That said, we understand that this is a bit cumbersome, and have some ideas for further streamlining the process that we will be working on in the upcoming weeks.