javascript - 带 knockout 阵列的内联编辑

Question

我正在尝试整合 Craig Cavaliers liveEditor一个数组的解决方案，但无法让它工作。

我的 HTML 是一个简单的 foreach 循环:

<ul data-bind="foreach: myArray">
    <li>      
        <div data-bind="liveEditor: message">
            <span class="view"><a href="#" data-bind="click: message.edit, text: message() || 'Click to edit message 1'"></a></span>
            <input class="edit" data-bind="value: message, 
                                enterKey: message.stopEditing, 
                                selectAndFocus: message.editing, 
                                event: { blur: message.stopEditing }" />
        </div>
    </li>
</ul>

这是我的 View 模型:

var viewModel = function(){
    var self = this;

    self.myArray = ko.observableArray();
    var newmsg = new Message({
        ID: 1,
        message: 'first message'
    });

    self.myArray.push(newmsg);
    newmsg.message('2nd string');
    self.myArray.push(newmsg);
};

Craig 的 bindingsHandlers 如下:

ko.extenders.liveEditor = function (target) {
    target.editing = ko.observable(false);

    target.edit = function () {
        target.editing(true);
    };

    target.stopEditing = function () {
        target.editing(false);
    };
    return target;
};

ko.bindingHandlers.liveEditor = {
    init: function (element, valueAccessor) {
        var observable = valueAccessor();
        observable.extend({ liveEditor: this });
    },
    update: function (element, valueAccessor) {
        var observable = valueAccessor();
        ko.bindingHandlers.css.update(element, function () { return { editing: observable.editing }; });
    }
};

最后是 CSS:

.edit {
    display: none;    
}
.editing .edit {
    display: block;    
}
.editing .view {
    display: none;
}

完整 fiddle :http://jsfiddle.net/AsleG/ujgn1tq8/

我哪里出错了？

Answer 1

这个问题的答案很简单。这与缺少图书馆无关；这完全是因为将我的 View 模型定义为函数要求它在 applyBindings 中实例化。“新 View 模型”是新 View 模型。