0

我正在尝试将可观察对象的创建封装在自定义绑定中,就像 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");
  }
};

我遇到的问题是 observable 似乎是在执行 applyBindings 命令的一部分之后创建的,并且只有 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();

就这样。

4

1 回答 1

0

问题是,当为您的 jsFiddle 示例中的前两个绑定评估绑定字符串时,$root.Test.IsRedundefined.

所以,它相当于 binding text: undefined。它还不是可观察的,因此没有创建依赖项并且绑定不会更新。

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

重要的部分是IsRed在解析包含它的绑定字符串之前存在。

于 2013-01-09T03:14:13.340 回答