Редактируемая строка knockoutJS пользовательская привязка

Question

Я часто отображаю текстовые данные на веб-странице, которые мне нужно изменить.

В настоящее время я пишу пользовательские обработчики mouseEvent для отображения кнопки "edit", всплывающей над div с наблюдаемой границей span наведен Если пользователь нажимает на него, я скрываю span с помощью visible knockoutJS переплет и показать текст input разрешить редактирование. На вкладке я сохраняю изменения редактирования и показываю обновленные span снова.

Существует ли пользовательская привязка KOJS с открытым исходным кодом, которая включала бы всю эту функциональность. Я не прошу писать это для меня, просто укажите на это, поскольку задача очень распространена, и у KO, кажется, есть хорошая основа для элегантной реализации.

Answer 1

На самом деле, есть что-то подобное, и это даже выглядит потрясающе.

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

Посмотрите это в действии здесь: http://vitalets.github.io/x-editable/demo-bs3.html

Надеюсь помочь:)

Answer 2

Ваш вопрос, как использовать строки в качестве источника для шаблонизатора? Если это так, я сделал это для одного из моих привязок

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