javascript - 在 Knockout 中使用 ckeditor 作为 observableArray 的一部分

Question

我正在尝试使用 CKeditor 和 knockout 将富文本编辑器添加到我的调查系统。我有我的 ViewModel，它有一个可观察的问题数组。我想让每个问题中的名称都使用 ckeditor。我看过帖子Knockout.js: array parameter in custom binding .并已实现，但我的 OnBlur 不工作。 ValueAccessor() 未返回可观察对象。所以我得到一个错误，在这行代码中 string is not a function() ..

  var observable = valueAccessor();
  observable($(element).val());

这是我的 Html，我只是暂时使用一个静态 Id，并且打算在我让它对数组中的一个问题起作用后改变它。

<tbody data-bind="foreach: questionModel">
                                    <tr>
                                        <td>
                                            <button data-bind='click: $root.addQuestion' class="btn btn-success" title="Add Question"><i class="icon-plus-sign fontColorWhite"></i></button>
                                            <button data-bind='click: $root.removeQuestion' class="btn btn-danger" title="Remove Question"><i class="icon-minus-sign fontColorWhite"></i></button>
                                        </td>
                                        <td><textarea id="question123" class="RichText" data-bind="richText: Name"></textarea></td>
                                        <td><input type="checkbox" data-bind="checked: AllowComment"  /></td>
                                        <td><button data-bind="click: $root.addAnswer" class="btn btn-success" title="Add Answer"><i class="icon-plus-sign fontColorWhite"></i></button></td>
                                        <td>
                                            <div  data-bind="foreach: possibleAnswerModel">
                                                <input style="width: 278px"  style="margin-bottom: 5px;" data-bind='value: Name' />
                                                 <button data-bind='click: $root.removeAnswer' class="btn btn-danger" title="Remove Answer"><i class="icon-minus-sign fontColorWhite"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                </tbody>

下面是我的 ViewModel 以及我的自定义绑定(bind)....

ko.bindingHandlers.richText = {
        init: function (element, valueAccessor, allBindingsAccessor, ViewModel) {

            var txtBoxID = $(element).attr("id");

            console.log("TextBoxId: " + txtBoxID);

            var options = allBindingsAccessor().richTextOptions || {};

            options.toolbar_Full = [
                ['Bold', 'Italic'],
                ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
                ['Link', 'Unlink']
            ];
            //handle disposal (if KO removes by the template binding)

            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {

                if (CKEDITOR.instances[txtBoxID]) {
                    CKEDITOR.remove(CKEDITOR.instances[txtBoxID]);
                };
            });

            $(element).ckeditor(options);

            //wire up the blur event to ensure our observable is properly updated

            CKEDITOR.instances[txtBoxID].focusManager.blur = function () {
                console.log("blur");
                console.log("Value: " + valueAccessor());
                console.log("Value: " + $(element).val());

                var observable = valueAccessor();
                observable($(element).val());

           };
        },

        update: function (element, valueAccessor, allBindingsAccessor, ViewModel) {
            var value = valueAccessor();

            console.log("Value Accessor: " + value);

            var valueUnwrapped = ko.utils.unwrapObservable(value);

            //var val = ko.utils.unwrapObservable(valueAccessor());
            console.log("Value: " + valueUnwrapped);
            $(element).val(valueUnwrapped);
        }
    };

function ViewModel(survey) {
        // Data
        var self = this;

        self.StartDate = ko.observable(survey.StartDate).extend({ required: { message: 'Start Date is required' } });
        self.EndDate = ko.observable(survey.EndDate).extend({ required: { message: 'End Date is required' } });
        self.Name = ko.observable(survey.Name).extend({ required: { message: 'Name is required' } });
        self.ButtonLock = ko.observable(true);

        self.questionModel = ko.observableArray(ko.utils.arrayMap(survey.questionModel, function(question) {
            return { Id: question.QuestionId, Name: ko.observable(question.Name), Sort: question.Sort, IsActive: question.IsActive, AllowComment: question.AllowComment, possibleAnswerModel: ko.observableArray(question.possibleAnswerModel) };
        }));

        // Operations
        self.addQuestion = function () {
            self.questionModel.push({
                Id: "0",
                Name: "",
                AllowComment: true,
                Sort: self.questionModel().length + 1,
                possibleAnswerModel: ko.observableArray(),
                IsActive:true
            });
        };

        self.addAnswer = function (question) {
            question.possibleAnswerModel.push({
                Id: "0",
                Name: "",
                Sort: question.possibleAnswerModel().length + 1,
                IsActive:true
            });
        };

        self.GetBallotById = function (id) {
            for (var c = 0; c < self.BallotProjectStandardList().length; c++) {
                if (self.BallotProjectStandardList()[c].BallotId === id) {
                    return self.BallotProjectStandardList()[c];
                }
            }
            return null;
        };

        self.removeQuestion = function(question) { self.questionModel.remove(question); };

        self.removeAnswer = function(possibleAnswer) { $.each(self.questionModel(), function() { this.possibleAnswerModel.remove(possibleAnswer) }) };

        self.save = function() {
            if (self.errors().length == 0) {
                self.ButtonLock(true);
                $.ajax("@Url.Content("~/Survey/Create/")", {
                    data: ko.toJSON(self),
                    type: "post",
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) { self.successHandler(data, data.success); },
                    error: function() {
                        self.ButtonLock(true);
                        self.errorHandler();
                    }
                });
            } else {
                self.errors.showAllMessages();
            }
        };
    }

    ViewModel.prototype = new ErrorHandlingViewModel();
    var mainViewModel = new ViewModel(@Html.Raw(jsonData));
    mainViewModel.errors = ko.validation.group(mainViewModel);
    ko.applyBindings(mainViewModel);

Answer 1

我发现我做错了什么。当我定义 observableArray() 时，我将对象定义为 ko.observable，但是，当我向数组添加问题时，我将其初始化为字符串。所以我改变了它以匹配并且它像冠军一样工作。这是变革插入。

     self.questionModel = ko.observableArray(ko.utils.arrayMap(survey.questionModel, function(question) {
            return { Id: question.QuestionId, Name: ko.observable(question.Name), Sort: question.Sort, IsActive: question.IsActive, AllowComment: question.AllowComment, possibleAnswerModel: ko.observableArray(question.possibleAnswerModel) };
        }));

        // Operations
        self.addQuestion = function () {
            self.questionModel.push({
                Id: "0",
                Name: ko.observable(),
                AllowComment: true,
                Sort: self.questionModel().length + 1,
                possibleAnswerModel: ko.observableArray(),
                IsActive:true
            });
        };