Javascript 使用敲除数组进行内联编辑

我试图将Craig Cavaliers解决方案与阵列集成，但无法使其工作

My 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>

Craig的BindingShandler如下所示：

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

全小提琴：

---

我在这方面哪里出了问题？

答案很简单。这与缺少图书馆无关；这完全是因为将我的viewmodel定义为一个函数要求它在ApplyBinding中实例化。

---

'new viewModel'是新的viewModel。

不阅读控制台会出错：1您没有包含KnockoutJS，2您不能将github用作CDN。包括来自类似CDN的链接。如果库不在那里，你必须自己将它上传到某个地方，就像liveEditor的“插件”一样。用这个建议测试一下，看看它是否有效。@Tyblitz还有一个问题，我从来都不知道jsfiddle上的控制台在哪里。。。？关于淘汰赛，它被设置为框架。即使将其更改为外部资源也不会改变任何事情。liveEditor不是一个插件，bindingHandler和extender的所有代码都在那里。@Janfohe我知道，但是app.js脚本@Asle G在以前版本的fiddle中使用，例如see无效：@Asle G忘了检查Fiddle选项中加载的库，所以是的，确实存在Knockout，我的错。如果没有JSFIDLE控制台，只需打开默认的浏览器控制台即可

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