2012-01-25 15 views
0

ノックアウトのdata-bind = "click:ShowHide"を使用して関数を呼び出す場合、どうすればよいでしょうか? データバインドはli要素にあり、これはテンプレートによって取り込まれています。次のように私の機能だった:ノックアウトテンプレート内のjquery slideToggle()関数

viewModel = { 
LoadedReports: ko.observableArray([]), 

ShowHide: function() { 

      $(this).children().slideToggle('slow'); 
     } 
} 

をし、私のテンプレートの中に私が持っている:

<li data-bind="click: ShowHide, clickBubble: false"><'children elements being populated'></li> 

答えて

-4

先日、この1つを自分で取得しました。私がしなければならなかったことについてのユダの提案に対するコメントを見てください。

+0

なぜあなた自身の答えを受け入れたのですか? – Adaptabi

1

リーを表すオブジェクトに.ShowHide機能を入れて(私はそれがLoadedReportインスタンスだと仮定しています。)

.ShowHideを入れてください。代わりに、あなたのビューモデルに.ShowHide関数を置くことができますし、あなたのバインディングでは、$ root.ShowHideをクリックしてください。

+0

私は実際にこれを他の日に考え出しました。理由は実際に$(this)セレクタにあります。 Liがクリックされたとき、関数全体にイベントが渡されていたので、代わりに次の行が必要でした: $(e.currentTarget).siblings( 'ul')。slideToggle(); ありがとうございます! – spacebed

+0

回答があればそれを投稿して、あなたの質問が未回答の質問に現れていることを知るようにしてください。 –

1

ご迷惑をおかけして申し訳ありません。そこでここでは明確な例である:質問から

<!-- Step 1 - Create the HTML File or the View --> 
<!DOCTYPE html> 
<html> 
<head> 
    <!-- Step 2 - Include jquery and knockout --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script> 

    <!-- Step 3 - Add script to run when page loads --> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 

      <!-- Step 4 - Create a ViewModel --> 
      function viewModel() { 
       _self = this; 
       _self.showHide = function(viewModel, event) { 
        $(event.currentTarget).children('div').slideToggle(); 
       }; 
      }; 

      <!-- Step 5 - Activates knockout.js bindings --> 
      ko.applyBindings(new viewModel()); 
     }); 
    </script> 
</head> 
<body style=""> 
    <div> 
     Option 1 
     <!-- Step 6 - Create a HTML Elements with bindings --> 
     <div data-bind="click: showHide" style="border:2px solid;"> 
     Click me 
      <div style="display: none;"> 
       Now you see me! 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

違いは、私はこの例では<div>タグの代わりに、<li>を使用していますということだけです。