從不工作的對象更新視圖模型

Question

我希望能夠觀察視圖模型中的對象。我有一個簡單的例子，不能按預期工作，任何人都可以看到問題？

採用淘汰賽1.1.1，有2個輸入這樣：

<form data-bind="submit: save"> 
    <input type="text" data-bind="value: deckName" /> 
    <input type="text" data-bind="value: deck().Name" /> 
    <button type="submit">Go</button> 
</form> 

頁面加載後，輸入獲得的默認值，但在提交表單不會更新viewModel.deck().Name但viewModel.deckName是。

<script type="text/javascript"> 
    var initialData = {"Name":"test"}; 

    var viewModel = { 
     deck: ko.observable(initialData), 
     deckName: initialData.Name, 
     save: function() { 
      ko.utils.postJson(location.href, { deck: this.deck, deckName: this.deckName }); 
     } 
    }; 
    ko.applyBindings(viewModel); 
</script> 

在表單POST，deck仍然會發送「測試」無論輸入而deckName將相應的輸入值。

我真正想要的是能夠觀察對象viewModel.deck，然後將其屬性綁定到輸入，但屬性不會更新。

Answer 1

您提供的內容有幾個問題。

1. 你只設置你的第二個輸入一個時間值二傳手因爲deck().Name是static value（而不是一個ko.observable或ko.observableArray）。 （爲了證明這一點ko.applyBindings(viewModel);後添加viewModel.deck({"Name":"updated test"});到腳本的末尾）
2. deckName是一個單向綁定 - 它在初始applyBindings和viewModel將由用戶或腳本的<input>所做的更改進行更新寫入。但是，如果您對viewModel進行編程更改，則您的輸入字段將不會更新以匹配。你會想看看Knockout.js'value binding documentation的最後一部分。

稍微改進版：

<form data-bind="submit: save"> 
    <input type="text" data-bind="value: deckName" /> 
    <input type="text" data-bind="value: deck().Name" /> 
    <button type="submit">Go</button> 
</form> 
<script type="text/javascript"> 
    var initialData = {"Name":"test"}; 

    var viewModel = { 
     deck: ko.observable(initialData), 
     // Set up a two way binding 
     deckName: ko.observable(initialData.Name), 
     // Set up a one time value setter 
     save: function() { 
      ko.utils.postJson(location.href, ko.toJSON(this)); 
      // When we save the model we post *it* back, rather than 
      // serializing it by hand. 
     } 
    }; 
    ko.applyBindings(viewModel); 
    viewModel.deck({"Name":"updated test"}); 
</script> 

使用fromJS另一種版本：

<form data-bind="submit: save"> 
    <input type="text" data-bind="value: Name" /> 
    <button type="submit">Go</button> 
</form> 
<script type="text/javascript"> 
    var initialData = {"Name":"test"}; 

    var viewModel = ko.mapping.fromJS(initialData); 
    viewModel.save = function() { 
     ko.utils.postJson(location.href, ko.toJSON(this)); 
     // When we save the model we post *it* back, rather than 
     // serializing it by hand. 
    } 
    ko.applyBindings(viewModel); 
</script> 

你會想看看在淘汰賽的fromJSON和fromJS funcitons（在其mapping plugin實現）。