Question

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

要理解我在这里想要实现的是示例：我想构建高级滑块，我不想滑块的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);

Answer 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

Answer 2

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

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

它按惯例工作，所以如果你有一个名为MyViewModel的模型的成员，那么它将寻找名为MyView的模板

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

http://jsfiddle.net/xJL7u/

使用我自己的自定义绑定包装knockout'template'绑定时出现异常

2 个答案: