javascript - 如何让 knockout 扩展器在 observableArray 中工作

Question

我目前正在使用 Mathew Schinckel 的 KnockoutJS dirty 扩展器 http://schinckel.net/2012/01/14/knockoutjs-dirty-extender./在我当前的项目中。我无法让这个扩展器在 observableArray 中工作。我想知道是否有人能够看一下我在这里做错了什么。

ko.extenders.dirty = function (target, startDirty) {
    var cleanValue = ko.observable(ko.utils.unwrapObservable(target));
    var dirtyOverride = ko.observable(ko.utils.unwrapObservable(startDirty));

    target.isDirty = ko.computed(function () {
        return dirtyOverride() || ko.utils.unwrapObservable(target) !== cleanValue();
    });

    target.markClean = function () {
        cleanValue(ko.utils.unwrapObservable(target));
        dirtyOverride(false);
    };
    target.markDirty = function () {
        dirtyOverride(true);
    };
    target.reset = function () {
        target(cleanValue());
        dirtyOverride(false);
    };

    return target;
};

function miscellaneousItem(data) {
    this.MiscellaneousId = ko.observable(data.MiscellaneousId);
    this.Description = ko.observable(data.Description).extend({ required: "", dirty: false });
    this.showDeleteForm = ko.observable(false);
    this.editableDescription = ko.observable(false);
}

function miscellaneousViewModel(initialData) {
    var self = this;
    self.miscItems = ko.observableArray([]);

    self.init = function () {
        $.map(initialData, function (i, index) {
            var item = new miscellaneousItem(i);
            self.miscItems.push(new miscellaneousItem(item));
        });
    };

    // edit function item for miscItems within a foreach loop in the view
    self.editItem = function (item) {
        console.log(item.Description.isDirty());
    };
}

HTML View :

        <div class="form" data-bind="visible: showForm">
        <div class="control-group" data-bind="css: { error: description.hasError() }">
            <label class="control-label">Description</label>
            <div class="controls">
                <textarea class="span12" data-bind="koFocus: showForm, value: description, valueUpdate: 'afterkeydown'"></textarea>
            </div>
        </div>

        <button class="btn btn-primary" id="btnSave" data-loading-text="Saving..." data-bind="disable: description.hasError(), click: addItem">Save</button>
        <button class="btn" data-bind="click: toggleForm">Cancel</button>

        <hr class="sg" />
    </div>
    <ul class="media-list" data-bind="foreach: miscItems">
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="/Content/img/educationEntry.png" alt="" />
            </a>
            <div class="media-body">
                <div class="row-fluid">
                    <div class="span9">
                        <h4 data-bind="html: $data.Description(), visible: !editableDescription()"></h4>
                        <textarea class="span12" rows="3" data-bind="value: $data.Description(), visible: editableDescription(), valueUpdate: 'afterkeydown'"></textarea>
                        <div data-bind="visible: editableDescription()">
                            <p>
                                <button class="btn btn-primary" data-bind="click: $parent.editItem">Save</button>
                                <button class="btn" data-bind="click: $parent.cancelItem">Cancel</button>

                            </p>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="pull-right">
                            <a href="#" class="btn btn-warning" title="Edit this entry" data-toggle="tooltip" data-bind="click: $parent.editItem"><i class="icon-edit"></i></a>
                            <a href="#" class="btn btn-danger" title="Delete this entry" data-toggle="tooltip" data-bind="click: $parent.removeItem"><i class="icon-trash"></i></a>
                        </div>
                    </div>
                </div>
                <div data-bind="visible: showDeleteForm">
                    <hr class="sg" />
                    <p>Are you sure you would like to delete this Miscellaneous item?</p>
                    <p><small class="quaternaryColorText"><em>* This can not be undone.</em></small></p>

                    <button class="btn btn-primary" data-bind="click: $parent.deleteItem"><i class="icon-trash"></i> Yes</button>
                    <button class="btn" data-bind="click: $parent.cancelDeleteItem">No</button>
                </div>
            </div>
        </li>
    </ul>

希望有人处理过与此问题类似的问题。感谢您的时间和回复。

Answer 1

我能够回答我自己的问题。我意识到我在 javascript 代码中所做的事情是错误的，并且我没有在 HTML 中使用双向绑定(bind)。为了使用双向绑定(bind)，在设置数据绑定(bind)属性时不得使用“()”。

希望这可以帮助其他和我有同样困难的人。

最诚挚的问候