Javascript 一个可写的计算可观察对象真的需要一个额外的内部可观察对象吗？
我试图使用一个可写的计算的可观察对象，但没有真正理解为什么我不能通过键入它来获取可观察对象中的一些数据。我发现我需要一个额外的可观察对象来将内容从write:复制到read:，这看起来很奇怪Javascript 一个可写的计算可观察对象真的需要一个额外的内部可观察对象吗？,javascript,knockout.js,computed-observable,Javascript,Knockout.js,Computed Observable,我试图使用一个可写的计算的可观察对象，但没有真正理解为什么我不能通过键入它来获取可观察对象中的一些数据。我发现我需要一个额外的可观察对象来将内容从write:复制到read:，这看起来很奇怪 self.fullName = ko.pureComputed({ read: function () { return ...data from other observables to show in the observable;
self.fullName = ko.pureComputed({
read: function () {
return ...data from other observables to show in the observable;
},
write: function (value) {
// value is the content in the input
// can be sent to other observables
},
owner: self
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Writable computed observables</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js'></script>
</head>
<body>
<h1>Writable computed observables</h1>
<p>See: <a href="http://knockoutjs.com/documentation/computed-writable.html">Knockout Doc</a></p>
<h2>Original example</h2>
<div>
First name: <input data-bind="textInput: firstName" />
<span data-bind="text: firstName"></span>
</div>
<div>
Last name: <input data-bind="textInput: lastName" />
<span data-bind="text: lastName"></span>
</div>
<div class="heading">
Hello, <input data-bind="textInput: fullName" />
<span data-bind="text: fullName"></span>
</div>
<h2>My example</h2>
<div>
Name: <input data-bind="textInput: Name" />
<span data-bind="text: Name"></span>
</div>
<div>
Mirror first name? <input type="checkbox" data-bind="checked: cbMirror" />
<span data-bind="text: cbMirror"></span>
</div>
<script>
function MyViewModel() {
var self = this;
// example from knockout site:
self.firstName = ko.observable('Planet');
self.lastName = ko.observable('Earth');
self.fullName = ko.pureComputed({
read: function () {
//return;
return self.firstName() + " " + self.lastName();
},
write: function (value) {
// value is the content in the input field, visible on form,
// but apparently not yet in the observable.
// now copy this value to first/last-name observables,
// that in turn copy it to the read-function,
// that returns it to the observable.
var lastSpacePos = value.lastIndexOf(" ");
if (lastSpacePos > 0) { // Ignore values with no space character
self.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
self.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
}
},
owner: self
});
// checkbox whether or not to mirror between two fields
self.cbMirror = ko.observable(false);
// this observable is to help the writable computed observable to copy input from write() to read()
self.tmpName = ko.observable();
// the writable computed observable that may mirror another field, depending on the checkbox
self.Name = ko.pureComputed({
read: function () {
return self.cbMirror() ? self.firstName() : self.tmpName();
},
write: function (value) {
//if (self.cbMirror()){
// self.firstName(value);
//}else{
self.tmpName(value);
//}
},
owner: self
});
}
ko.applyBindings(new MyViewModel());
</script>
</body>
</html>
从下面的答案中获得理解后，我可以简化编写：我示例代码的一部分，请参阅我注释掉的不需要的代码。是的，如果要存储用户输入，您需要一个可观察的代码。计算机不会存储信息，它只会修改信息。这就像变量和函数之间的区别。函数不会存储它们的值以供以后查看，它只是修改输入并给出输出
可写计算可观察对象不存储数据。它将数据传递给支持的可观察对象。这就是写入部分的全部要点，即获取值并将其存储在某处。如果您添加另一个span来查看tmpName的值，您将看到它正在存储您键入的任何内容，除非选中了cbMirror。您可以进一步解释cbMirror应该做什么吗？@JasonSpake函数cbMirror对于这个问题不是必需的，但是如果您在较低的输入字段中键入了什么，该字段将与另一个输入字段镜像“是”或“否”。如果没有这个复选框，我就不会真正需要一个可计算的。如果没有tmpName，我就无法实现这一目标。没有tmpName你能解决这个问题吗？@Johannes我不介意标题中的拼写，但在淘汰赛网站上，行话是可写的，并表明可写性并不是更好。好吧，对不起……什么的数据绑定输出？如果你真的好奇的话：所有数据最终都会通过ajax调用服务器，但在这里，我用一个我想我现在明白的方法来测试这个。在这种情况下，您需要一个支持字段。更新了我的答案谢谢你的解释。仍然很奇怪，因为wr.comp.obs似乎存储数据，但我没有找到从write:to read:获取数据的捷径。在我的代码中，tmpName不用于存储，只用于从write:到read:的路径。您的cbChecked只是交换正在进行存储的observable。如果选中，数据将写入firstName，如果未选中，数据将写入tmpName。