Knockout JS多次点击绑定

时间:2013-07-25 15:05:41

标签: jquery data-binding knockout.js

当我点击一个锚点时,我希望它保存对象(工作正常),我也想让按钮不可见。当我点击按钮时,我需要将'InQuestionBank()'属性设为true。如果我将锚点上的数据绑定更改为:

<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));
    }
}

1 个答案:

答案 0 :(得分: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)