javascript - 为什么 createViewModel 不能正确绑定(bind)自定义组件？

Question

我尝试构建一个简单的自定义 knockout 组件作为我尝试进行的测试的一部分。不幸的是，我似乎在数据绑定(bind)方面遇到了一些类似于 Set viewModel = $data for Component 的问题。然而那里的决议似乎并没有解决我的问题。

我在下面创建了一个小示例，我尝试在其中使用此自定义组件。失败并出现错误:

Uncaught ReferenceError: Unable to process binding "text: function (){return bookNum }" Message: bookNum is not defined

这个问题似乎与上下文绑定(bind)有关，如果我将 HTML 绑定(bind)更改为包含 $parent 那么它就会起作用，但显然这实际上并不需要:

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

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

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

.book div {
  float: left;
}

<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>

Answer 1

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