Question

这个问题的线索似乎很难找到，我开始认为它必须是显而易见的（我错过了什么），无用或不可能：

我使用observables（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()));
    }
};

但是对于observable，我理解我需要对底层对象的引用和属性的 name 来执行更新。（我可以得到前者，但如何得到后者？）

我已经调查了淘汰赛的value绑定，试图了解但没有取得更多成功......

有人会有一个简单的例子说明使用observable插件会是什么样子？任何线索都会非常感激。

由于

Answer 1

使用Knockout＆＃39; preprocess 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();
        })
}

使用observable插件创建双向自定义绑定

2 个答案: