लोड

Question

पर नॉकआउट जेएस कॉलिंग फ़ंक्शंस मैं क्लाइंट-साइड व्यू मॉडल बनाने के लिए Knockout.js का उपयोग कर रहा हूं। मेरे दृश्य मॉडल में मैं कुछ फ़ंक्शंस का खुलासा करना चाहता हूं जो पृष्ठ में तत्वों (सामान्य एमवीवीएम मॉडल) से बंधे जा सकते हैं। मैं केवल चाहते हैं इन कार्यों के लिए एक बटन से एक क्लिक करें घटना के जवाब में कहा जाता था, लेकिन वे जब दृश्य मॉडल का निर्माण किया गया है बुलाया गया है ...

मैं इस तरह अपने मॉडल को परिभाषित किया है:

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

जब मैं कोड निष्पादित करता हूं, तो दो अलर्ट स्वचालित रूप से आग लगते हैं, लेकिन मैं उन्हें उम्मीद नहीं कर रहा हूं। मैं एएसपी MVC4 उपयोग कर रहा हूँ, और HTML उस दृश्य मॉडल का उपयोग कर रहा है नीचे है:

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

मैं ट्यूटोरियल ऑनलाइन और कुछ अन्य नॉकआउट नमूने, साथ ही अन्य स्थानों पर मेरी कोड में मैं कहाँ है के माध्यम से देखा है नॉकआउट का इस्तेमाल किया, लेकिन मैं नहीं देख सकता कि क्यों दो कार्य (SubscribeToCategory और UnsubscribeFromCategory) दस्तावेज़ लोड पर फायरिंग कर रहे हैं।

Answer 1

jsfiddle

यह मुझे एक दूसरी लिया, लेकिन उन्हें आसानी से ठीक किया जा रहा समाप्त हो गया। अपने डेटा-बाइंड = "पर क्लिक करें:" क्लिक करें: SubscribeToCategory() "और दोनों को हैंडलर पर क्लिक करें, यह डेटा-बाइंड =" क्लिक करें: सदस्यता लें श्रेणी "और डेटा-बाइंड =" क्लिक करें: सदस्यता छोड़ें FromCategory "

Answer 2

ऐसा प्रतीत होता है कि ऐसा लगता है कि बाध्यकारी <button data-bind="click: SubscribeToCategory()">Subscribe</button> में फ़ंक्शन नाम में ब्रैकेट समस्या है।

() का होना चाहिए नहीं होना चाहिए। तो यह इस तरह दिखना चाहिए:

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