Knockout Funkcje wywoływania JS przy obciążeniu

Question

Używam Knockout.js do zbudowania modelu widoku po stronie klienta. W moim widoku modelu chciałbym ujawnić niektóre funkcje, które można powiązać z elementami na stronie (typowy model MVVM). Chcę tylko te funkcje się nazywać w odpowiedzi na zdarzenie click z przycisku, jednak są one nazywany kiedy model Pogląd ten został zbudowany ...

Mam zdefiniowane mojego modelu tak:

<script type="text/javascript"> 
var ViewModel = function(initialData) { 
    var self = this; 

    self.id = initialData; 
    self.isSubscribed = ko.observable(false); 
    self.name = ko.observable(); 

    self.SubscribeToCategory = function() { 
     $.ajax({ 
      url: '@Url.Action("Subscribe", "Category")', 
      type: 'POST', 
      data: { 
       categoryId: self.id 
      }, 
      success: function() { 
       self.isSubscribed(true); 
      }, 
      failure: function() { 
       self.isSubscribed(false); 
      } 
     }); 

     alert('Subscribing...'); 
    }; 

    self.UnsubscribeFromCategory = function() { 
     $.ajax({ 
      url: '@Url.Action("Unsubscribe", "Category")', 
      type: 'POST', 
      data: { 
       categoryId: self.id 
      }, 
      success: function() { 
       self.isSubscribed(false); 
      }, 
      failure: function() { 
       self.isSubscribed(true); 
      } 

     }); 

     alert('Unsubscribing...'); 
    }; 

    self.LoadCategory = function() { 
     $.ajax({ 
      url: '@Url.Action("GetCategory", "Category")', 
      type: 'POST', 
      async: true, 
      data: { 
       categoryId: self.id 
      }, 
      dataType: 'json', 
      success: function (data) { 
       self.isSubscribed(data.IsSubscribed); 
       self.name(data.Name); 
      } 
     }); 
    }; 

    self.LoadCategory(); 
}; 


$(document).ready(function() { 
    var data = '@Model'; 
    var viewModel = new ViewModel(data); 
    ko.applyBindings(viewModel); 
}); 

Kiedy jednak wykonam kod, oba alarmy zostaną automatycznie uruchomione, ale nie spodziewam się ich. Używam ASP MVC4 i HTML, który jest przy użyciu modelu widok jest poniżej:

<p> 
    ID: <span data-bind="text: id"></span> 
</p> 
<div id="subscribe" data-bind="visible: isSubscribed == false"> 
    <button data-bind="click: SubscribeToCategory()">Subscribe</button> 
</div> 
<div id="unsubscribe" data-bind="visible: isSubscribed == true"> 
    <button data-bind="click: UnsubscribeFromCategory()">Unsubscribe</button> 
</div> 
<div> 
    Category Name: <span data-bind="text: name"></span>Is Subscribed: <span data-bind="text: isSubscribed"> 
    </span> 
</div> 

szukałem przez samouczki online i niektórych innych próbek pucharowej, a także w innych miejscach w moim kodu, gdzie mam nokaut, ale nie rozumiem, dlaczego te dwie funkcje (SubscribeToCategory i UnsubscribeFromCategory) uruchamiają ładowanie dokumentów.

Answer 1

jsfiddle

Zajęło mi chwilę, ale skończyło się to prosty fix. usuń() z danych-bind = "kliknij: SubskrybujToKategorię()" i ustaw oba kliknięcia jako handlery na takie dane-bind = "kliknij: SubskrybujToKategorię" i data-bind = "kliknij: UnsubscribeFromCategory"

Answer 2

Wygląda na to, że problemem są nawiasy w nazwie funkcji w powiązaniu <button data-bind="click: SubscribeToCategory()">Subscribe</button>.

Nie powinno tam być(). Powinno to wyglądać następująco:

<button data-bind="click: SubscribeToCategory">Subscribe</button>