Knockout JS 在加载时调用函数答案

【问题标题】：Knockout JS calling functions on loadKnockout JS 在加载时调用函数
【发布时间】：2012-05-07 03:28:15
【问题描述】：

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

我查看了在线教程和其他一些淘汰赛示例，以及我的代码中使用淘汰赛的其他地方，但我不明白为什么这两个函数（SubscribeToCategory 和 UnsubscribeFromCategory）在文档加载时触发。

【问题讨论】：

标签： javascript function viewmodel knockout.js

【解决方案1】：

jsfiddle

我花了一秒钟，但最终得到了一个简单的修复。从您的 data-bind="click: SubscribeToCategory()" 中删除 () 并让您单击处理程序这个 data-bind="click: SubscribeToCategory" 和 data-bind="click: UnsubscribeFromCategory"

【讨论】：

看起来你和我同时得到了答案。谢谢！
如果你需要一个带参数的函数调用？喜欢：data-bind="click: SucscribeToCategory(25)"
您将bind 函数用于您自己的函数。在您的示例中，@Wrench 是这样的：data-bind="click: SucscribeToCategory.bind($data, 25)"

【解决方案2】：

看来是绑定<button data-bind="click: SubscribeToCategory()">Subscribe</button>中函数名中的括号有问题。

() 不应该在那里。所以它应该是这样的：

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

【讨论】：

如何传参？