Написание пользовательских элементов управления в Sproutcore 2 - PullRequest
Новая
       27

Написание пользовательских элементов управления в Sproutcore 2

3 голосов
/ 24 августа 2011

Я довольно новичок в Sproutcore, но я знаком с Handlebars. Я прошел учебник по Todo и проверил несколько других примеров.

Я люблю все в этом и хотел бы использовать его по Backbone, но мне трудно понять, как подключить пользовательские элементы управления. Я вижу, где некоторые данные будут играть в привязки, но при запуске событий я теряюсь.

Например, если бы у меня был список ссылок, который я хотел бы использовать для фильтрации данных под ним, как мне связать события? Я знаю, что в магистрали вы бы использовали событие и селектор: "click .link"

Любая помощь будет принята с благодарностью!

Ответы [ 3 ]

8 голосов
/ 10 декабря 2011

Звучит так, будто вы хотите перебрать список объектов и создать ссылки, которые при нажатии вызывают некоторый код 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'));
    }
});

Тем не менее, мы понимаем, что это немного громоздко, и у нас есть некоторые идеи для дальнейшей оптимизации процесса, над которым мы будем работать в предстоящие недели.

2 голосов
/ 05 ноября 2011

Вот список демонстрационных приложений.

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

Вот плагин для моего собственного демонстрационного приложения с открытым исходным кодом, которое я ввел - chililog . Я веду блог о том, как я использовал sproutcore на blog.chililog.org.

Надеюсь, это поможет.

0 голосов
/ 11 декабря 2011

Альтернативный способ добиться того, что Иегуда делает выше, - использовать директиву #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'));
        }
    })
});
...