knockout.js - 使用 observable 插件创建 2 路自定义绑定(bind)

Question

这个问题的线索似乎很难找到，以至于我开始认为它必须是显而易见的(我遗漏了一些东西)、无用的或不可能的:

我在使用 observables (ko.observables()) 的 knockout 中得到了 2-way 绑定(bind)的东西。然而，所有这些括号都是一个真正的痛苦。所以当我使用 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/)

两者都可以很好地处理 knockout 的 value 绑定(bind)。

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

在我的绑定(bind)中，我通常会这样做:

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

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

我研究了 knockout 的 value 绑定(bind)，试图理解但没有取得更多成功...

有人可以举一个简单的例子来说明使用 observable 插件会是什么样子吗？任何线索将不胜感激。

谢谢

Answer 1

使用 Knockout 的 preprocess feature ，您的绑定(bind)可以添加一个方法来直接写入属性。方法如下:

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/