可编辑的字符串 knockoutJS 自定义绑定答案

【问题标题】：Editable string knockoutJS custom binding可编辑的字符串 knockoutJS 自定义绑定
【发布时间】：2012-08-23 11:23:03
【问题描述】：

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

目前，我编写了一个自定义 mouseEvent 处理程序来显示一个“编辑”按钮弹出在 div 上，并且可观察到的绑定 span 被鼠标悬停。如果用户单击它，我会通过 visible knockoutJS 绑定隐藏 span 并显示文本 input 以允许编辑。在选项卡上，我保存编辑更改并再次显示更新的span。

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

【问题讨论】：

我不知道现有的绑定已经为您执行此操作。然而，在这篇帖子knockmeout.net/2012/08/thatconference-2012-session.html 的视频的 35:16，我演示了如何创建一个非常相似的绑定。只需进行一些调整即可使用“编辑”按钮，而不仅仅是在链接和输入之间切换。

标签： knockout.js ko-custom-binding

【解决方案1】：

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

https://github.com/AndersMalmgren/Knockout.Bindings/blob/master/src/knockout.bindings.js

我的仓库中的相关代码

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

【讨论】：

【解决方案2】：

其实有这样的东西，而且看起来还很厉害。

https://github.com/brianchance/knockout-x-editable

在此处查看实际操作：http://vitalets.github.io/x-editable/demo-bs3.html

希望能帮到你:)

【讨论】：