1

次のような単純なオブザーバブルから計算されたオブザーバブルを作成しました。

  • this.fullDetails は、計算されたオブザーバブルです。
  • 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());

古いオブザーバブルの値で新しいオブザーバブルを作成します。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

あなたが何をしようとしているのかわからない。

コードの問題は、 で返すオブザーバブルをサブスクライブしていないことですcomputeFullDetails。

これを試すことができます：

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

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

例 (firstName のみ変更): http://jsfiddle.net/nyothecat/VJ4th/1/

于 2014-04-24T13:30:57.963 に答える