web-dev-qa-db-ja.com

ノックアウト-クリックされた要素の取得

次のマークアップがあります。

_<fieldset>
   <div>
       <label class="editor-label">Question 1?</label>
       <input type="text" class="editor-field" />     
       <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
    <div>
       <label class="editor-label">Question 2?</label>
       <input type="text" class="editor-field" />
       <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
   <div>
       <label class="editor-label">Question 3?</label>
       <input type="text" class="editor-field" />
        <button type="button" data-bind="click: helpClicked">Help</button>
       <p class="help">Help 3</p>
   </div>
</fieldset>
_

クリックしたボタンと同じhelpのクラスDivで_<p>_の可視性を切り替えたいです。どのボタンがクリックされたかを判断するために$（this）を使用しようとしていますが、そこから正しい「ヘルプ」要素を取得できます。

問題は、$(this)がクリックされたボタンを返さないことです。

現時点では、クリックされたボタンを次のように単純に非表示にしようとしています。

_var viewModel = {
    helpClicked: function () {
        $(this).hide();           
    }
};

ko.applyBindings(viewModel);
_

これは機能しません。誰でも助けてくれますか？

javascriptjqueryknockout.js
32
davy

1つの可能な解決策を備えたjsFiddleを次に示します。

http://jsfiddle.net/unklefolk/399MF/1/

次の構文を使用して、必要なDOM要素をターゲットにできます。

var viewModel = {     
    helpClicked: function (item, event) {   
        $(event.target).hide(); 
        $(event.target).next(".help").show()            
    } 
};  
ko.applyBindings(viewModel); ​
44
Mark Robinson

_event.currentTarget_に続いてnext()を使用してみてください

_$(event.currentTarget).next().hide();   
_

ここでの作業例

14
ManseUK

Knockoutを介して作成されたフィールドセット内のdivはありますか？ （テンプレートに見える）。もしそうなら、これにアプローチするよりMVVMの方法は、ボタンクリックハンドラから現在バインドされているアイテムを抽出し、各ヘルプ段落の可視性を、対応するアイテムのそのハンドラによって設定されたビューモデルプロパティにバインドすることだと思いますUI操作を手続き的に。少なくとも、これは私が目指していたパターンであり、（特にWPFとSilverlightで同様のことを行った後に）より良くなっています。

3
Tom Hall
This should work

var viewModel = 
{
         helpClicked: function (data,element) {
       /*
      data is the current model passed to the button
      element is the button currently interacting with
     but to get the dom object equivalent of the 
     element you've to access it          
    via its currentTarget property
    */
        $(element.currentTarget).hide();           
    }
};

ko.applyBindings(viewModel);
1
Alayo Hussein