knockoutjs 매핑을 사용하여 뷰 모델 바인딩

Question

나는 knockoutjs를 배우기로 결심했으며, json을 내 viewmodel에 바인딩하는 데 약간의 문제가 있습니다. 나는 그 더미를 수색 해 보았고, 많은 것을 시도했지만, 나는 무엇인가 놓쳤을 것임에 틀림 없다.

자바 스크립트 :

var data = { 
     "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
     "TestText": "Hello World" 
    }; 

    var viewModel = {}; 
    ko.mapping.fromJSON(data, viewModel); 

    ko.applyBindings(viewModel); 

HTML

TestText: <span data-bind="text: TestText"></span><br> 
TestList: <select id="TestList" 
      data-bind=" 
      options: TestList, 
      optionsText: 'Name', 
      optionsValue: 'ID', 
      optionsCaption: 'Please Select'"></select> 

편집

변수 '데이터'내가 얻을 JSON의 예로서 사용되었다

다시 서버에서. 어쨌든, 위의 코드를 getJSON으로 업데이트하고 위의 예제가 getJSON을 사용하지 않아서 실제로 제공하지 못하는 에러를 얻었습니다. JAVASCRIPT 업데이트

:

는

var viewModel; 
$.getJSON('/myurl', 
    function (data) { 
     viewModel = data; 
    }); 

alert(viewModel); 

$(function() { 
    ko.applyBindings(viewModel); 
}); 

내가 여기 필요는 경고 상자만큼 .. 작동한다는 것입니다있어 문제가있다. 내가 그 라인을 주석다면, 그것은 작동하지 않습니다!

Answer 1

첫 번째 문제는 하나의 멤버 만있는 배열로 데이터를 선언하지만 데이터 바인딩 선언 내에서이 배열을 참조하지 않는다는 것입니다.

두 번째로 자바 스크립트 개체로 데이터가 있으면 그 개체에 JSON이 필요하지 않습니다.

업데이트 JS 코드 :

var data = { 
    "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
    "TestText": "Hello World" 
}; 

var viewModel = data;//{}; 

ko.applyBindings(viewModel); 

근무 바이올린 : http://jsfiddle.net/AfgAG/19/

편집 :. 질문의 업데이트 또한 초기 대답을 반영하기 위해 업데이트 대답 \

로보기 모델 옵션 바인딩을 사용할 수있는 배열로 옵션 목록을 가져야합니다.

또한 AJAX 호출로 업데이트 할 때 구조가 정의되고 데이터 바인딩에 대해 정의 된 관측 값이 시작되도록 뷰 모델을 시작하는 것이 좋습니다.

업데이트 된 자바 스크립트 코드는 아래를 참조하십시오. 내가 바이올린쪽에 액세스 할 수 없었기 때문에 바이올린을 만들 수 없었습니다.

var viewModel = 
    { 
     TestText: ko.observable('My Initial Text'), 
     TestList: ko.observableArray([]) 
    } 

ko.applyBindings(viewModel); 

// using set time out here to simulate your ajax call. 
setTimeout(function() { 
    // this would normally be the content for your getJson success method. 
    // this is where you use your from JSON. 
    // data is a javascript object from ajax response. 
    var data = { 
     "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }], 
     "TestText": "Hello World" 
    }; 
    // update the view model observable properties. 
    viewModel.TestText(data.TestText); 
    viewModel.TestList(data.TestList); 
}, 2000); 

Answer 2

알아 냈습니다. 참고로,이 내가 무슨 짓을 :

자바 스크립트

var viewModel = (function() { 
     var self = this; 
     this.model = ko.observableArray([]); 

     $.getJSON('/myurl', 
      function (data) { 
       self.model = ko.mapping.fromJS(data, self.model); 
       ko.applyBindings(self.model); 
      }); 
    }); 

    ko.applyBindings(new viewModel()); 

HTML

<span data-bind="text: TestText"></span> 
<select id="TestList" 
      data-bind=" 
      options: TestList, 
      optionsText: 'Name', 
      optionsValue: 'ID', 
      optionsCaption: 'Please Select'"></select>