使用可观察的插件创建2种方式的自定义绑定 [英] Create 2 way custom binding with observable plugin

问题描述

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

The clues for this question seem so hard to find that I begin to think it must be either obvious (and I'm missing something), useless, or impossible:

在可观察变量(ko.observables())的剔除中得到2向绑定. 但是，所有这些括号都是真正的痛苦.因此，当我使用Durandal时，尽管尝试了observable插件:

I get the 2-way binding thing in knockout with observables (ko.observables()). However all this parenthesis are a real pain. So as I'm using Durandal, I though I'd give the observableplugin a try : http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html

(出于记录，我也尝试过以下方法:

(for the record, I also tried this one: http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/)

两者在剔除value绑定方面都可以正常工作.

Both are working fine with knockout's valuebinding.

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

My problem is I have multiple knockout custom bindings for my application and I don't get how you update an observable property that is not a ko.observable() in these custom bindings.

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

In my binding I would normally do this:

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

但是对于可观察对象，我知道我需要引用基础对象和属性的名称以执行更新. (我可以得到前者，但是如何获得后者?)

However with observables, I understand I'd need the reference to the underlying object and the name of the property to perform an update. (I can get the former but how to get the latter?)

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

I've looked into the value binding of knockout to try to understand but without more success...

有人可以举一个简单的例子来说明可观察的插件的外观吗? 任何线索将不胜感激.

Would someone have a simple example of how it would look like with the observable plugin? Any clue would be much appreciated.

谢谢

推荐答案

使用淘汰赛的 preprocess功能，您的绑定可以添加直接写入属性的方法.这是您的操作方法:

Using Knockout's preprocess feature, your binding can add a method to write to the property directly. Here's how you could do it:

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/

这篇关于使用可观察的插件创建2种方式的自定义绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！