4

我目前正在编写一个自定义绑定处理程序来在我们的页面中形成一个控件。
该控件生成自己的视图模型，作为主视图模型的子视图，以不改变原始视图模型。（控件的实现与页面无关）

代码示例
我创建了一个抽象示例：http:
//jsfiddle.net/jdarn/

JS： 

ko.bindingHandlers.subBinding = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var actualValue = valueAccessor();

        ko.virtualElements.emptyNode(element);

        var subViewModel = {};
        subViewModel.subValue =
            new ko.observable(ko.utils.unwrapObservable(actualValue) * 2);

        var childBindingContext = bindingContext.createChildContext(viewModel);
        ko.utils.extend(childBindingContext, subViewModel);

        var getDomNodesFromHtml = function(html) {
            var div = document.createElement('div');
            div.innerHTML = html;
            var elements = div.childNodes;
            var arr = [];
            for(var i = 0; i < elements.length; i++) {
                arr.push(elements[i]);
            }
            return arr;
        };

        var html = '<p data-bind="text: subValue"></p>' +
            '<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 4)"></pre>';

        ko.virtualElements.setDomNodeChildren(element, getDomNodesFromHtml(html));
        ko.applyBindingsToDescendants(childBindingContext, element);

        return { controlsDescendantBindings: true };
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    }
};
ko.virtualElements.allowedBindings.subBinding = true;

var mainViewModel = {
    value1: new ko.observable(100),
    value2: new ko.observable(200)
};
ko.applyBindings(mainViewModel, document.getElementById('main'));

HTML： 

<div id="main">
    <p>Main viewmodel:</p>
    <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 4)"></pre>

   <hr />

   <!-- ko subBinding: value2 -->
   <!-- /ko -->
</div>

问题
绑定处理程序的视图模型上可用 的$data实际上是父（主）视图模型。这似乎是一种奇怪的行为，因为subValue等其他属性实际上是正确绑定的。这些属性不存在于主视图模型上。

Guesswork
我的猜测是 controlsDescendantBindings 仅在绑定发生后返回。因此，主视图模型渗透。然后，KO 倾向于使用 mainviewmodel-context 中存在的 $data。

问题
（考虑到我的猜测是正确的）
是否有适当的方法来创建子视图模型并将其绑定到（在这种情况下为虚拟的）绑定处理程序自己的控件？

4

1 回答 1

4

叹息，重大疏忽。

我的实现基于以下文档页面： http:
//knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

可以在以下位置找到更新的代码：http:
//jsfiddle.net/jdarn/2/

变化：

var childBindingContext = bindingContext.createChildContext(viewModel);
ko.utils.extend(childBindingContext, subViewModel);

变成

var childBindingContext = bindingContext.createChildContext(subViewModel);

我误解了 createChildContext 接受的参数——这个参数是孩子上下文中的 viewModel。

--

HTML 控件片段变为： 

var html = '<p data-bind="text: subValue"></p>' +
        'data: <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 4)"></pre>' + 
        'parent: <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 4)"></pre>' +
        'root through parentcontext: <pre data-bind="text: JSON.stringify(ko.toJS($parentContext.$root), null, 4)"></pre>' +
        'root (not working): <pre data-bind="text: JSON.stringify(ko.toJS($root), null, 4)></pre>';
于 2013-10-17T09:36:36.253 回答