Knockout JS 多次点击绑定答案

【问题标题】：Knockout JS Multiple click bindingKnockout JS 多次点击绑定
【发布时间】：2013-07-25 13:36:44
【问题描述】：

当我单击锚点时，我希望它保存对象（效果很好），并且我还想让按钮不可见。单击按钮时，我需要使“InQuestionBank()”属性为真。如果我将锚上的数据绑定更改为：

<a data-bind="click: InQuestionBank, visible: !InQuestionBank()" href="#" class="saveBank btn btn-info title" data-toggle="tooltip" data-original-title="Insert into question bank"><i class="icon-plus-sign"></i></a>

按钮将消失。是否可以有多个点击绑定，或者有更好的方法吗？

这是我目前对我的主播的看法：

<a data-bind="click: $parent.SaveQuestionBank, visible: !InQuestionBank()" href="#" class="saveBank btn btn-info title" data-toggle="tooltip" data-original-title="Insert into question bank"><i class="icon-plus-sign"></i></a>

我的淘汰码：

var Question = function (data) {
    var self = this;
    self.Type = ko.observable(data.Type);
    self.Question = ko.observable(data.Question);
    self.Options = ko.observable(data.Options);
    self.InQuestionBank = ko.observable(data.InQuestionBank);
}

var ViewModel = function (initial) {
    var self = this;
    self.Questions = ko.observableArray([]);

    self.SaveQuestionBank = function (question) {
        $.ajax({
            url: initial.SaveQuestionBankUrl,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON({ question: question }),
            success: function (data) {
                if (data.status == "OK") {
                    $.msgGrowl({
                        type: 'success',
                        title: 'Question Bank',
                        text: 'Successfully saved question in question bank.'
                    });
                }
                else if (data.status == "ERROR") {
                    $.msgGrowl({
                        type: 'error',
                        title: 'Question Bank',
                        text: 'An error occurred - please try again.'
                    });
                }

                self.OverallQuestionsBank.push(new OverallQuestionBank({
                    Question: question.Question(),
                    Type: question.Type(),
                    Options: question.Options()
                }));
            }
        });
    }

    for (var i = 0; i < initial.questions.length; i++) {
        self.Questions.push(new Question(initial.questions[i], initial.ParentID));
    }
}

【问题讨论】：

为什么不只是在将标志“InQuestionBank”推送到服务器或将其推送到OverallQuestionsBank 时更改它？
在 SaveQuestionBank 函数中，我尝试了 'self.InQuestionBank = true;'但这没有用。
检查我的答案，它会为你工作，我会在一秒钟内解释为什么
听起来不错，记住在 Knockout 中要获得一个值，我们需要使用 'getter' 函数，而设置一个值需要使用 'setter' 函数。您唯一不需要这样做的时候是如果您已经拥有该值（在您的示例中，因为您已经传入了“问题”的值，所以您不需要 question().InQuestionBank(true) 只需 question.InQuestionBank(真的））

标签： jquery data-binding knockout.js

【解决方案1】：

只需更改问题标志“InQuestionBank”，如下所示

var Question = function (data) {
    var self = this;
    self.Type = ko.observable(data.Type);
    self.Question = ko.observable(data.Question);
    self.Options = ko.observable(data.Options);
    self.InQuestionBank = ko.observable(data.InQuestionBank);
}

var ViewModel = function (initial) {
    var self = this;
    self.Questions = ko.observableArray([]);

    self.SaveQuestionBank = function (question) {

        // Change the question's flag
        question.InQuestionBank(true);

        $.ajax({
            url: initial.SaveQuestionBankUrl,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON({ question: question }),
            success: function (data) {
                self.OverallQuestionsBank.push(new OverallQuestionBank({
                    Question: question.Question(),
                    Type: question.Type(),
                    Options: question.Options()
                }));
            }
        });
    }
}

请记住，当您更改可观察属性（例如 InQuestionBank）的值时，您需要使用 Knockout 的“setter”函数来设置新值。

在这种情况下是 question.InQuestionBank(true)

【讨论】：

我忘记了设置新值的'setter'函数。我完全想多了。