2012-03-15 13 views
1

ためにforeachの行セレクタを取得するにはどのように私はここに非常に新しいですが、このサイトでは、すでに私をたくさん助けたので、私はあなたたちは自分の質問に役立つことを願って。KnockoutJSは:jQueryの

私はちょうどKnockoutJSでコーディングしてスタートし、私は今のところそれが好き、それは私のためのプログラミングの非常に異なった方法ですが、私はすでにそれが私を与える利点を参照してください。

しかし、私は少し問題に遭遇していますが、これはおそらく本当にシンプルですが、私はそれをやり遂げることができません。

ここで問題を特定するためにコードを削除しました。

私はKOのforeachバインディングによって生成されるリストを持っていますが、これをクリックすると、jQueryイベントが発生します。この場合、たとえばアニメーションで非表示にします。

コードで見てもわかるように、スクリプトの最後にDOM機能付きの行をいくつか書き、ul内のal li要素のjqueryイベントをハードコードすることができますが、他の理由の中で)大きなプロジェクトのために私のコードを整理するためにKOでコーディングするには、ユーザーがクリックをクリックしてバインディングをクリックすると起こるjqueryイベントを本当に書きたい。

は、ここに私のコードで、利便性のために、私はあまりにもjfiddleを作りました: http://jsfiddle.net/edleutscher/JTa5Y/

JS:

function AppViewModel() { 
    var self = this; 

    self.people = ko.observableArray([ 
     { name: 'Bert' }, 
     { name: 'Charles' }, 
     { name: 'Denise' } 
    ]); 

    self.clickAction = function(data) { 
     $(data).hide(); 
    } 
} 

ko.applyBindings(new AppViewModel());​ 

HTML:事前に

<ul data-bind="template: { name: 'rowTemplate', foreach: people }"></ul> 

<script type="text/html" id="rowTemplate"> 
<li data-bind="click: function() { $root.clickAction($data) }">${name}</li> 
</script>​ 

感謝を!

答えて

1

あなたがクリックされた要素にアクセスすることができますので、クリック機能にイベントを渡す必要があります。

http://jsfiddle.net/JTa5Y/1/

あなたのクリック機能:

self.clickAction = function(data, event) { 
    $(event.target).hide(); 
} 

そして、ちょうど完璧に動作し、データバインド声明

<script type="text/html" id="rowTemplate"> 
    <li data-bind="click: function(vm, event) { $root.clickAction($data, event) }">${name}</li> 
</script>​ 
+0

、私はそれは単純なものである必要があります知っていました。素早い答えをありがとう! –

+0

"click:clickAction.bind($ data)"としてバインドして、ビューから醜いコードブロックを削除する方が良いです。 – Tuan

関連する問題