Knockout.js 可编辑字符串knockoutJS自定义绑定

我经常在需要更改的网页上显示文本数据

目前，我编写了一个定制的mouseEvent处理程序，在

div

上显示一个“编辑”按钮弹出窗口，其中

span

被鼠标移动到可观察的范围内。如果用户单击它，我将通过

visible

knockoutJS绑定隐藏

span

，并显示文本

input

，以允许编辑。在选项卡上，我保存编辑更改并再次显示更新的

span

---

是否有一个自定义的开源KOJS绑定，它将包含所有这些功能。我不是要为我写它，只是指出它，因为这项任务非常常见，而且KO似乎有很好的基础来优雅地实现它。

您的问题是如何使用字符串作为模板引擎的源代码？如果是这样的话，我已经为我的一个绑定这样做了

我的回购协议中的相关代码

var stringTemplateSource = function (template) {
    this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

以及如何使用它

ko.bindingHandlers.myCustomBinding = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            ko.renderTemplate('<span data-bind="text: $data"></span>', bindingContext.createChildContext(valueAccessor()), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

            return { controlsDescendantBindings: true };
        }

ko.bindingHandlers.myCustomBinding={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
renderTemplate（“”，bindingContext.createChildContext（valueAccessor（）），{templateEngine:stringTemplateEngine}，元素，“replaceChildren”）；
返回{ControlsDescentBindings:true}；
}

事实上，有这样的东西，甚至看起来很棒

请在此处查看它的实际操作：

---

希望能提供帮助：）

我不知道已有的绑定已经为您实现了这一点。但是，在本文35:16的视频中，我演示了如何创建一个非常类似的绑定。使用“编辑”按钮只需进行一些调整，而不仅仅是在链接和输入之间切换。