Sproutcore 2でのカスタムコントロールの作成

Question

私はSproutcoreをかなり新しくしましたが、私はハンドルバーに精通しています。私はTodoのチュートリアルを歩き、いくつかの他のサンプルもチェックアウトしました。

私はそれについてすべてを愛していて、バックボーンで使用したいと思っていますが、私はカスタムコントロールを配線する方法を理解するのに苦労しています。データの一部がバインディングにどのように反映されるのか分かりますが、失われたイベントをトリガーします。

例として、私がそれ以下のデータをフィルタリングするために使用したいリンクリストがあれば、私はイベントに結びついていますか？私はバックボーンであなたがイベントとセレクターを使用することを知っています： "クリック.link"

ご協力いただければ幸いです！

Answer 1

デモアプリケーションの一覧を示します。 chililog -

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

は、ここに私が入った私自身のオープンソースのデモアプリケーション用のプラグです。私はblog.chililog.orgでsproutcoreをどのように使っているのかについてブログに書いています。

これが役に立ちます。

Answer 2

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

言った、我々はこれは少し面倒であることを理解し、そしていくつかのアイデアを持っています今後の数週間で取り組む予定のプロセスをさらに合理化するためのものです。

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