1

我从这样的简单可观察对象创建了一个计算的可观察对象：

  • this.fullDetails 是计算出来的 observable。
  • this.computeFullDetails 是计算的读取函数。
  • this.writeToComponents 是计算的写入函数。

当我修改与原子可观察对象对应的输入框时，计算属性会被修改，但是当我修改计算属性时，原子属性不会更新。我可以用另一种方法来完成这样的事情吗？

请看这个小提琴http://jsfiddle.net/saurabh0jha/wqpZ9/

function PersonViewModel()
{
    this.firstName = ko.observable("");
    this.lastName = ko.observable("");
    this.phoneNos = ko.observable(0);
    this.address = ko.observable("");
    this.computeFullDetails = function(){
            retObj = {};
            retObj.firstName=ko.observable(this.firstName());
            retObj.lastName=ko.observable(this.lastName());
            retObj.phoneNos=ko.observable(this.phoneNos());
            retObj.address=ko.observable(this.address());
            return retObj; 
        };
    
    this.writeToComponents = function(value){
                this.firstName(value.firstName());
                this.lastName(value.lastName());
                this.phoneNos(value.phoneNos());
                this.address(value.address());
            };
        
    this.fullDetails = ko.computed(
        {
            read:this.computeFullDetails,
            write:this.writeToComponents,
        },this);

}


var vm = new PersonViewModel();
ko.applyBindings(vm);

HTML

<html lang='en'>
<head>
  <title>Hello, Knockout.js</title>
  <meta charset='utf-8' />
  <link rel='stylesheet' href='style.css' />
</head>
<body>
    <h2>atomic</h2>
    <input data-bind="value: firstName" style="display:block" />
    <input data-bind="value: lastName" style="display:block"/>
    <input data-bind="value: phoneNos"style="display:block" />
    <input data-bind="value: address" style="display:block"/>
    <h2>computed</h2>
    <input data-bind="value: fullDetails().firstName" style="display:block"/>
    <input data-bind="value:fullDetails().lastName" style="display:block"/>
    <input data-bind="value: fullDetails().phoneNos"style="display:block" />
    <input data-bind="value: fullDetails().address"style="display:block" />

    <script type='text/javascript' src='knockout-2.2.0.js'></script>
    <script type='text/javascript' src='2computedObservables.js'>   </script>
</body>
</html>
4

2 回答 2

0

这个：

retObj.firstName=ko.observable(this.firstName());

用旧的值创建一个新的 observable。因此，每次computeFullDetails调用都会丢失所有旧依赖项。

与以前绑定的所有内容fullDetails().firstName将永远不会再次更新。

如果我理解正确，你想要这样的东西：

function PersonViewModel() {
    this.firstName = ko.observable("");
    this.lastName  = ko.observable("");
    this.phoneNos  = ko.observable(0);
    this.address   = ko.observable("");

    this.anyAttribute = ko.computed(function() {
      this.firstName();
      this.lastName();
      this.phoneNos();
      this.address();

      // what this returns is not important, its
      // only job is to notify subscribers when any
      // dependency has changed
    });

    this.anyAttribute.subscribe(function() {
      // do here whatever you need to do when any
      // of the attributes has changed
    });
}

var vm = new PersonViewModel();
ko.applyBindings(vm);
于 2014-04-25T20:29:27.283 回答
0

不确定您要做什么。

您的代码的问题是您没有订阅您返回的 observables computeFullDetails。

你可以试试这个：

<input data-bind="value: fullDetailsFirstName" style="display:block" />

this.fullDetailsFirstName = ko.computed({
    read: function () {
        return self.firstName();
    },
    write: function (newValue) {
        self.firstName(newValue)
    }
});

示例（仅更改名字）：http: //jsfiddle.net/nyothecat/VJ4th/1/

于 2014-04-24T13:30:57.963 回答