Knockout Click Event funktioniert nicht

Question

Ich arbeite an einer Wetterseite für mich selbst (und vielleicht andere in der Zukunft) und habe ein Problem mit einer Schaltfläche, die Wetterwarnungen anzeigen und ausblenden. Sie können view the page sehen, was ich versuche zu tun. (Entschuldigung, ich bin auf FL, aber sie haben jetzt eine Menge Warnungen).

Page Source

JS Source

Ich habe meine Warnungen in ein Array kommen und für jedes Element, ich brauche eine Schaltfläche, die die Warnungen werden ein- und ausblenden. Meine Seite Quelle enthält:

<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> 

Und mein Ansichtsmodell wie folgt aussieht:

// ================== 
// 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')); 

Ich habe versucht, ein paar verschiedene Methoden, und ich kann nichts an der Arbeit. (So ​​der kommentierte Code und die Warnung). Was merkwürdig ist, da ich das in der Vergangenheit schon ein paar Mal ohne Probleme gemacht habe. Ich bin mir sicher, dass es etwas Einfaches ist, das ich vermisst habe. Jede Hilfe wäre willkommen.

Answer 1

Könnte es vielleicht sein, dass Sie das weatherViewModel in Ihrem Aufruf von ko.applyBindings anstelle von alertsViewModel verwendet haben?

Ich glaube, die $ root in den Bindungen der Schaltfläche bezieht sich auf weatherViewModel, da dies die VM ist, die von ko angewendet wird.

Versuchen Sie vielleicht, den Speicherort der Funktion zu ändern, oder verwenden Sie einfach stattdessen alertViewModel.