Question

我有一个简单的模型，并且有一个可观察的（“model.thing”）。然后我在此设置了一个额外的observable（“someProp”）并将其传递给组件的参数。

model.thing = ko.observable({});
model.thing.someProp = ko.observable("Yolo");

此时，observable已成为计算机，我不知道为什么。

如果我更改模型，以便不将model.thing作为一个可观察对象，而是将其作为一个简单的对象然后传入，那么它就会通过而不会变成计算...

有没有人对此行为有解释？

这是一个工作示例（它会警告param，表明它已成为计算机）。

http://liveweave.com/MozLiW

var viewModel = function() {
    var model = {};
	model.thing = ko.observable({}); //when thing is observable
  	//model.thing = {};
	model.thing.someProp = ko.observable("Yolo");
	
    
  return model;
};

ko.components.register('custom-element', {
    viewModel: function(params) {
        this.value = params.value;
      	alert(this.value); //then this is dependent, why?!
    }, 
    template:
  		'<div data-bind="text: value"></div>'
});

ko.applyBindings(viewModel);

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<title>Knockout component</title>
</head>
<body>
  <custom-element params="value: thing().someProp"></custom-element>
<!--   
<custom-element params="value: thing.someProp"></custom-element> -->

</body>
</html>

Answer 1

感谢nemesv，他指出我this解释了它。

使用自定义元素语法时提供的params对象还包括一个$ raw属性（除非params碰巧提供了一个具有相同名称的属性），可以访问计算机返回原始值（而不是未包装的值）。

例如：

<my-component params="value: selectedItem().value"></my-component>

在这种情况下，由于访问了selectedItem，因此提供了param 计算的。访问计算机时，展开的值为返回以避免必须双重打开一个参数以获得其值。但是，在这种情况下，您可能希望访问值observable，而不是它的未包装价值。在组件中，这可能是通过访问params.$raw.value()来实现。默认功能倾向于易于使用（不必打开两次参数）同时为高级病例提供$raw。

为什么这个observable在传入组件时会成为计算/依赖？

1 个答案:

例如：