绑定到可观察创建的内部自定义绑定

时间:2013-01-08 19:25:19

标签: javascript knockout.js code-reuse custom-binding

我试图在自定义绑定中封装一个observable的创建,就像knockoutjs-validation的isValid,但是没有扩展绑定,因为将来这个属性将是另一个记录复杂序列的绑定的结果输入上的事件,感觉就像我不应该为此使用自定义绑定。

以下代码显示了负责创建observable的自定义绑定。

ko.bindingHandlers.myBinding = {
  init: function (
  element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext) {
    console.log("init myBinding");

    var observable = valueAccessor();
    observable.IsRed = ko.observable(true);
    console.log("isred created");

    ko.applyBindingsToNode(element, {
      value: observable,
      mySubBinding: observable.IsRed
    }, viewModel);
    console.log("finish myBinding");
  },
  update: function (
  element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext) {
    console.log("update myBinding");
  }
};

我遇到的问题是,在执行部分applyBindings命令之后似乎是创建了observable,并且只有View上的后绑定才能看到observable的正确值。

我写了一个jsfiddle来显示行为。在其中,IsRed是可观察的观察结果。

http://jsfiddle.net/ricardomp/c2HnJ/15/

预期结果将是具有红色背景的输入和具有相同值的前后跨度标记。

我能做些什么来完成这个结果?结果绑定不应该依赖于任何外部可观察或属性,对吧? 你会提出另一种实施方案吗?

提前致谢。

更新:

我认为值得一提的是myBinding是一个封装多个绑定的绑定。因此,像IsRed一样,我会将3或4个绑定分配给类似的可观察对象。

最终更新:

在RP的回答之后,我编写了以下代码来完成observables的初始化:

ko.observable.fn.colorStatus = function () {
    this.isRed = ko.observable();
    this.isGreen = ko.observable();
    this.isBlue = ko.observable();

    this.ResetStatus = (function () {
        this.isRed (undefined);
        this.isGreen (undefined);
        this.isBlue (undefined);
    }).bind(this);
    return this;
};

之后我只需要在我的observable初始化时调用colorStatus。

self.value = ko.observable().colorStatus();

就是这样。

1 个答案:

答案 0 :(得分:0)

问题在于,当你的jsFiddle例子$root.Test.IsRed中的前两个绑定评估绑定字符串时,undefinedtext: undefined

因此,它相当于绑定IsRed。它不是一个可观察的,因此它没有创建依赖项,并且绑定不会更新。

您需要确保在绑定字符串中使用它之前创建IsRed。您可以使用扩展程序(extenders或扩展base types)在视图模型中执行此操作。否则,您可以添加一个绑定,将其添加到前一个元素上。

重要的是,在解析包含它的绑定字符串之前,{{1}}存在。