3

私は Sproutcore にはかなり慣れていませんが、Handlebars には慣れています。Todo チュートリアルを一通り見て、他のいくつかのサンプルもチェックアウトしました。

私はそれについてのすべてが大好きで、Backbone で使用したいと考えていますが、カスタム コントロールを接続する方法を理解するのに苦労しています。一部のデータがバインディングに組み込まれる場所はわかりますが、イベントのトリガーについてはわかりません。

例として、リンク リストの下にあるデータをフィルター処理するために使用したいリンク リストがある場合、イベントに関連付けるにはどうすればよいですか? バックボーンでは、イベントとセレクターを使用することを知っています：「.linkをクリック」

どんな助けでも大歓迎です！

4

3 に答える 3

8

オブジェクトのリストをループしてリンクを作成し、クリックすると、元のオブジェクトにアクセスできる 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'));
    }
});

とはいえ、これが少し面倒であることは理解しており、今後数週間で作業するプロセスをさらに合理化するためのいくつかのアイデアがあります.

于 2011-12-10T01:37:53.597 に答える
2

ここにデモアプリのリストがあります。

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

これは、私が入力したオープン ソース デモ アプリのプラグ - chililogです。blog.chililog.org で、sproutcore の使用方法についてブログを書いています。

お役に立てれば。

于 2011-11-04T22:48:54.030 に答える
0

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'));
        }
    })
});
于 2011-12-11T18:42:48.983 に答える