ノックアウトクリックイベントが機能しない

Question

自分自身（将来的には他の人）の天気予報ページに取り組んでいます。天気予報の表示と非表示を切り替えるボタンに問題があります。 view the page私は何をしようとしているか見ることができます。 （申し訳ありませんが、私はフロリダを選んでいますが、今はたくさんの警告があります）。

Page Source

JS Source

私は私のアラートが配列に入ってくると、各アイテムのために、私は警告を表示し、非表示になりますボタンを必要としています。

<div data-bind="foreach: alertsViewModel.features"> 
    <div class="col-12"> 
     <div class="alert alert-danger" role="alert"> 
      <p> 
       <strong data-bind="text: properties.headline"></strong> 
       <button type="button" class="btn btn-link" data-bind="click: $root.showHideAlert">Show</button> 
      </p> 
      <div data-bind="attr: {id: properties.id}" style="display: none;"> 
       <p data-bind="lineBreaks: properties.description"></p> 
       <p><strong>Instructions</strong></p> 
       <p data-bind="lineBreaks: properties.instruction"></p> 
      </div> 
     </div> 
    </div> 
</div> 

をそして、私のViewModelには次のようになります：：マイページのソースが含まれてい

// ================== 
// Alerts View Model 
// ================== 
var alertsViewModel = { 

    features: ko.observableArray([]), 
    hwoUrl: ko.observable(""), 
    hwoText: ko.observable(""), 
    showHideAlert: function(data, event){ 
     alert('you clicked'); 
     /*$('#hwo').toggle('slow',function(){ 
      if ($('#showHwo').text() == "Show") 
      { 
       $('#showHwo').text("Hide"); 
      } 
      else 
      { 
       $('#showHwo').text("Show"); 
      } 
     });*/ 
    } 
}; 

ko.applyBindings(weatherViewModel, document.getElementById('weather-alerts')); 

は、私はいくつかの異なる方法を試してみましたし、私は何も動作させることはできません。 （コメントされたコードと警告）。これは私が過去に数回これを何の問題もなく行って以来、奇妙です。私はそれが私が逃したシンプルなものだと確信しています。どんな助けもありがとう。

Answer 1

alertsViewModelではなくko.applyBindingsの呼び出しでweatherViewModelを使用したためでしょうか？

ボタンのバインディングの$ rootはweatherViewModelを参照すると思います。これは、koによって適用されたVMだからです。

おそらく関数の場所を変更するか、代わりにalertViewModelを使用してみてください。