使用我自己的自定义绑定包装淘汰赛“模板”绑定时出现异常答案

【问题标题】：Exception when wrapping knockout 'template' binding with my own custom binding使用我自己的自定义绑定包装淘汰赛“模板”绑定时出现异常
【发布时间】：2013-01-01 13:35:38
【问题描述】：

我正在尝试编写基于模板绑定的自定义绑定。想法是拥有自己的视图模型类的模板，但我不想将该类的实例添加到父视图模型（至少不在代码中。在执行时添加实例对我来说是可以的）。

要了解我在这里要实现的目标是示例：我想构建高级滑块，我不希望滑块的 html 在模板中，滑块也需要它自己的类，但我不想添加滑块视图模型实例到父视图模型。这是我的代码，它起初可以工作，并且似乎首先呈现模板，但随后抛出异常，我不明白为什么。 View working code here

html:

  <script type="text/html" id="my-template">  
    <div data-bind="text: internalValue"></div>
  </script>

  <div data-bind="templateWithModel: {name: 'my-template', dataPropName: 'price', modelConstructor: Slider}">
  </div>

js:

ko.bindingHandlers.templateWithModel = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
        var options = ko.utils.unwrapObservable(valueAccessor());
        var modelName = options.name + "_" + options.dataPropName;
        viewModel[modelName] = new options.modelConstructor(viewModel[options.dataPropName]);

        ko.bindingHandlers.template.init(element, valueAccessor);
    },
    'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var modelName = options.name + "_" + options.dataPropName;
        options.data = viewModel[modelName];

        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
}


var Slider = function(obsVal){
  var self = this;

  self.internalValue = ko.observable(obsVal());
}     

var vm = {price: ko.observable(5)};

ko.applyBindings(vm);

【问题讨论】：

标签： knockout.js templatebinding custom-binding

【解决方案1】：

在您的init 函数中，您需要返回ko.bindingHandlers.template.init 的值或返回{ controlsDescendantBindings: true }。

这告诉 Knockout 绑定将负责将绑定应用到子元素。否则，Knockout 将继续对子元素应用与整个视图模型的绑定，这会导致您的异常，因为 internalValue 不是顶级视图模型上的属性。

这部分文档：http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html 和这篇博文有助于进一步解释 controlsDescendantBindings：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

【讨论】：

谢谢，这就是问题所在。我以为我查看了所有文档和资源，显然没有给予足够的关注。我在想，如果 ko 检测到双重绑定，也许它可以提供更好的异常，我花了几个小时试图找出出错的原因和位置
Andrej，请参阅我的答案，了解解决初始问题的替代方法（模型 > 视图绑定）

【解决方案2】：

我做了一个框架，用于将视图模型与模板绑定。看这里，

https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki/Template-convention

它按约定工作，因此如果您有一个名为 MyViewModel 的模型成员，那么它将查找名为 MyView 的模板

<div data-name="myMember"></div>

http://jsfiddle.net/xJL7u/

【讨论】：