使用可观察的插件创建双向自定义绑定

Question

这个问题的线索似乎很难找到，以至于我开始认为它要么是显而易见的(而且我遗漏了什么)，要么是无用的，要么是不可能的：

我得到了带有可观测值(ko.observables())的敲除中的双向绑定。然而，所有这些括号都是真正的痛苦。因此，当我使用Durandal时，我想尝试一下observable插件：http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html

(为了记录在案，我也尝试过这个：http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/)

两者都可以很好地与敲除的value绑定。

我的问题是，我的应用程序有多个敲除自定义绑定，我不知道如何更新这些自定义绑定中不是ko.observable()的可观察属性。

在我的绑定中，我通常会这样做：

ko.bindingHandlers.testBinding = {
    init: function(element, valueAccessor) {
        var myObservable = valueAccessor();
        // here I could detect if it's an observable or a POJO
        // ... how to know if it's a property ???

        $(element).blur(function() {

            // ... how to write to myObservable if it's a writable property
            // ... and not a ko.observable() ???
            myObservable($(element).val());

        });

    },
    update: function(element, valueAccessor) {
        $(element).val(ko.unwrap(valueAccessor()));
    }
};

但是，对于可观察的对象，我知道我需要引用底层对象和属性的名称来执行更新。(我可以得到前者，但如何得到后者？)

我研究了敲除的value绑定试图理解，但没有更多的成功.

有人会有一个简单的例子，它会是什么样子与可观察的插件？任何线索都将不胜感激。

谢谢

Answer 1

使用Knockout的 feature，您的绑定可以添加一个直接写入属性的方法。以下是你如何做到的：

ko.bindingHandlers.testBinding = {
    preprocess: function(value, name, addBindingCallback) {
        addBindingCallback('testBindingWriter', 'function(v){' + value + ' = v}');
        return value;
    },
    init: function(element, valueAccessor, allBindings) {
        var value = valueAccessor();
        $(element).blur(function() {
            if (ko.isObservable(value)) {
                value($(element).val());
            } else {
                allBindings.get('testBindingWriter')($(element).val());
            }
        });
    },
    update: function(element, valueAccessor) {
        $(element).val(ko.unwrap(valueAccessor()));
    }
};

示例：http://jsfiddle.net/mbest/U7Jeg/

Answer 2

如果只想获得属性名称，就可以使用预处理将其存储在绑定处理程序上，如下所示：

propertyName: null,
preprocess: (value) => {
        this.propertyName = value;
        return value;
},

现在可以访问init函数中的属性，并将其与bindingContext组合起来，以设置值：

init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
        $(element).blur(() => {
            bindingContext.$data[this.propertyName] = $(element).val();
        })
}

注意:我使用上面的箭头函数来保留“this”的意思。如果这不是一个选项，您可以这样做：

init: (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) => {
        thisHandler = this;
        $(element).blur(function () {
            bindingContext.$data[thisHandler.propertyName] = $(element).val();
        })
}