剣道UI MVVMの不明な動作

Question

次のJavaScriptコードを使用すると、ボタンクリック時にmodify（）関数が呼び出されたときにperson.Nameプロパティが更新されないのはなぜかと思います。

var person = { 
    Id: 1, 
    Name: "John" 
}; 

var model = kendo.observable({ 
    start: function() { 
    kendo.bind($("#test"), this); 
    }, 
    modify: function(){ 
    var self = this; 
    self.Name = "John Doe"; 
    console.log(self.Name); 
    console.log(person.Name); 
    } 
}); 

var person = $.extend({}, person, model); 
person.start(); 

JSFiddle LINK

Answer 1

あなただけの「修正」関数スコープで自己変数を更新しているからです。あなたは "人"変数を更新していません。 jQueryのextend関数への呼び出しは、personオブジェクトをモデルにバインド/関連付けることではありません。

あなたが望むものを達成するためにkendo.observableオブジェクトクラスを使用する例を以下に示します。

var viewModel = kendo.observable({ 
    person: { 
    id: 1, 
    name: "John" 
    }, 
    modify: function(e) { 
    console.log(viewModel.person.get("name")); 
    viewModel.person.set("name", "John Doe"); 
    console.log(viewModel.person.get("name")); 
    } 
}); 

kendo.bind($("#test"), viewModel); 

、作業jsfiddleはhereです。

注目すべき重要なポイントは、personオブジェクトがobservableオブジェクトの一部として定義されていることです。後でマージされません。また、 "get"と "set"を使用して観測値を読み取ったり更新したりすることは重要です。methods。