Writing custom controls in Sproutcore 2

Question

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!

Answer 1

Here's are list of demo apps.

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

Here's a plug for my own open source demo app that I entered - chililog. I'm blogging about how I've used sproutcore at the blog.chililog.org.

Hope this helps.

Answer 2

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: http://jsfiddle.net/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.

Answer 3

An alternative way to achieve what Yehuda is doing above is to use the #collection directive:

Template code:

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

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.PeopleView = SC.CollectionView.extend({
    itemViewClass: SC.View.extend({
        mouseDown: function() {
            var person = this.get('content');
            alert(person.get('firstName'));
        }
    })
});