在加载时淘汰JS调用函数

Knockout JS calling functions on load

本文关键字:调用 函数 JS 淘汰 加载      更新时间:2023-09-26

我正在使用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>