Knockout JS llamando funciones en la carga

Question

Estoy usando Knockout.js para construir un modelo de vista del lado del cliente. En mi opinión, el modelo me gustaría exponer algunas funciones que pueden vincularse a los elementos de la página (modelo típico de MVVM). Sólo quiero que estas funciones sean llamados en respuesta a un evento de clic de un botón, sin embargo, se han llama cuando se ha construido el modelo de vista ...

he definido mi modelo como este:

<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); 
}); 

Cuando ejecuto el código, sin embargo, las dos alertas se disparan automáticamente, pero no estoy esperando que lo hagan. Estoy utilizando ASP MVC4, y el código HTML que está utilizando el modelo de vista es el siguiente:

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

He mirado a través de los tutoriales en línea y algunas otras muestras de final, así como otros lugares en mi código en las que tengo Usé el knockout, pero no puedo ver por qué las dos funciones (SubscribeToCategory y UnsubscribeFromCategory) se activan en la carga de documentos.

Answer 1

jsfiddle

Me tomó un segundo, pero terminó siendo una solución simple. elimine el() de su data-bind = "click: SubscribeToCategory()" y haga que haga clic en controladores this data-bind = "click: SubscribeToCategory" y data-bind = "click: UnsubscribeFromCategory"

Answer 2

Parece que los corchetes en el nombre de la función en el enlace <button data-bind="click: SubscribeToCategory()">Subscribe</button> es el problema.

Los() 's no deberían estar allí. Por lo tanto, debería verse así:

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