在加载时淘汰JS调用函数
Knockout JS calling functions on load
我正在使用Knockout.js来构建客户端视图模型。在我的视图模型中,我想公开一些可以绑定到页面中元素的函数(典型的 MVVM 模型)。我只希望调用这些函数以响应按钮中的单击事件,但是在构建视图模型时会调用它们......
我这样定义我的模型:
<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>
我已经在线查看了教程和其他一些挖空示例,以及我的代码中使用挖空的其他地方,但我不明白为什么这两个函数(订阅类别和取消订阅类别)在文档加载时触发。
jsfiddle
我花了一秒钟,但最终是一个简单的修复。 从 data-bind="click: SubscribeToCategory()" 中删除 (),并使两个单击处理程序都成为此 data-bind="click: SubscribeToCategory" 和 data-bind="click: UnsubscribeFromCategory"
似乎绑定
<button data-bind="click: SubscribeToCategory()">Subscribe</button>
中函数名称中的括号是问题所在。
() 不应该在那里。所以它应该看起来像:
<button data-bind="click: SubscribeToCategory">Subscribe</button>
相关文章:
- 如何从模块链中调用函数.导出到节点中
- 调用函数内部的函数
- 在javascript中调用c函数
- DropDownListFor赢得't在更改时调用函数
- Javascript页面调用函数
- 在动画结束之前调用函数
- 允许父窗口在其不同域的子iframe上调用函数
- 运行Infinite Scroll后调用函数时出现问题
- JavaScript:在调用函数的文本输入上按enter键
- 使用大括号和不使用bracs调用函数的区别
- javascript在事件上调用函数
- 从index.html调用函数,该函数无限循环
- 从带参数的字符串变量调用函数中的函数
- 为什么 JS 不在滚动时调用函数
- 是否可以在不更改上下文的情况下调用函数.apply
- 如何在ES6类中使用参数调用函数
- AngularJS:调用函数时编号不更新
- JavaScript中的立即调用函数表达式(IIFE)-传递jQuery
- 在JavaScript中调用函数时自定义此选项
- 调用函数中声明的变量