개체가 작동하지 않는 뷰 모델 업데이트

Question

개체를 뷰 모델 내부에서 관찰하고 싶습니다. 예상대로 작동하지 않는 간단한 예제가 있는데 누구나 문제를 볼 수 있습니까?

<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가되지 않는 양식을 제출하기에 : 녹아웃 1.1.1를 사용

는 다음과 같은 두 입력을 가지고있다. 양식 POST에

<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> 

는 deck는 여전히 문제 deckName 동안 입력이 해당 입력 값이 될 것 "테스트"를 보내드립니다.

정말로 원하는 것은 객체 viewModel.deck을 관찰하고 해당 속성을 입력에 바인딩 할 수 있지만 속성은 업데이트되지 않습니다.

Answer 1

제공하신 것에 몇 가지 문제가 있습니다. deck().Name가 static value 때문에 (A ko.observable 또는 ko.observableArray 반대)

1. 당신은 두 번째 입력을위한 한 시간 값 세터를 설정했습니다.
2. deckName 바인딩 한 방법이다 (이 ko.applyBindings(viewModel); 후 스크립트의 끝에 viewModel.deck({"Name":"updated test"});를 추가 증명하기 위해) - 그것은 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을 사용하는 대체 버전 : 당신은 마네의 fromJSON 및 fromJS funcitons보고 싶을 것이다

<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> 

은 (는 mapping plugin에서 구현).