Я использую Knockout.js для создания модели просмотра на стороне клиента. В моей модели я хотел бы выделить некоторые функции, которые могут быть привязаны к элементам на странице (типичная модель MVVM). Я хочу, чтобы эти функции вызывались в ответ на событие click от кнопки, однако они вызываются при построении модели представления...
Я определил свою модель следующим образом:
<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);
});
Когда я выполняю код, эти два предупреждения срабатывают автоматически, но я их не ожидаю. Я использую ASP 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) запускают загрузку документа.
Это заняло у меня второе место, но в итоге оказалось простым решением. удалите() из вашего data-bind = "click: SubscribeToCategory()" и сделайте оба клика-обработчика этими данными-bind = "click: SubscribeToCategory" и data-bind = "click: UnsubscribeFromCategory"
Похоже, что проблема заключается в скобках в имени функции в привязке <button data-bind="click: SubscribeToCategory()">Subscribe</button>.
() не должно быть. Поэтому он должен выглядеть так:
<button data-bind="click: SubscribeToCategory">Subscribe</button>