1

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

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

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);
4

2 回答 2

1

在您的init函数中，您将希望返回ko.bindingHandlers.template.init或 return的值{ 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

于 2013-01-01T17:28:10.173 回答
0

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

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

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

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

http://jsfiddle.net/xJL7u/

于 2013-01-02T09:47:12.377 回答