为什么没有正确地创建ViewModel绑定自定义组件？

Question

我尝试过构建一个简单的自定义淘汰组件，作为我尝试做的测试的一部分。不幸的是，我似乎遇到了与Set viewModel = $data for Component类似的数据绑定问题，但是那里的解决方案似乎并没有解决我的问题。

我在下面创建了一个小例子，我试图使用这个自定义组件。这失败并出现错误：

  

未捕获的ReferenceError：无法处理绑定＆＃34; text：function（）{return bookNum}＆＃34;   消息：bookNum未定义

这个问题似乎围绕着上下文绑定，如果我要将HTML绑定更改为包含$parent，那么它会起作用，但显然这不应该是真的需要：

<p data-bind="text: $parent.title"></p>

这是浏览器中调试的上下文的快照：

＆＃13;

＆＃13;

ko.components.register("myCustom", {
	viewModel: {
		createViewModel: function(params, componentInfo) {
			var context = ko.contextFor(componentInfo.element);
			var self = context.$data;

			// Add a computed value on
			ko.utils.extend(self, {
				bookNum: ko.computed(function() {
					switch(self.title()) {
						case "A": return 1;
						case "B": return 2;
						case "C": return 3;
					}

					return -1;
				})
			});
		}
	},
	template: '<div class="book">\
                  <div data-bind="text: bookNum"></div>\
                  <div>:</div>\
                  <div data-bind="text: title"></div>\
                  <br/>\
               </div>'
});

var vm = {};
vm.items = ko.observableArray();
ko.applyBindings(vm);

setTimeout(function() {
	vm.items.push({ title: ko.observable("A") });
	vm.items.push({ title: ko.observable("B") });
	vm.items.push({ title: ko.observable("C") });
}, 1500);

＆＃13;

.book div {
  float: left;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-bind="foreach: items">
  <p data-bind="text: title"></p>
  <div data-bind="component: { name: 'myCustom' }"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该返回ko.utils.extend函数。