2012-03-29 2 views
4

나는 다음과 같은 코드녹아웃을 위해 매핑 플러그인을 사용하는 방법은 무엇입니까?

$(function() { 



    function get_updates() { 
     $.getJSON('/new-lines.json', function(data) { 
      var fullViewModel= ko.mapping.fromJS(data); 
      ko.applyBindings(fullViewModel) 


     }); 
    } 

    function poll() 
    { 
     setTimeout(function(){ 
     get_updates(); 
     poll();},3000) 

    } 




    poll() 
}); 

쓴 그리고 JSON 데이터는 다음과 같습니다

{"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"} 

가 어떻게이 html 부분을 작성해야?

저는 아주 새로운 JavaScript입니다. 도와주세요.

답변

9

매핑 플러그인을 올바르게 사용하고있는 것으로 보아 약간의 오해의 소지가 있습니다.

녹아웃을 사용하는 방식이 올바르지 않습니다. 3 초마다 폴링하고 데이터를로드 한 다음 다시 바인딩합니다. 일반적인 KO 응용 프로그램에 한 번만 applyBindings을 호출하는 것이 좋습니다.

주기적으로 모델을 업데이트하는 경우 매핑 플러그인을 사용하는 방식이 정확합니다. 나는 그것을 어떻게 할 것인가. 이 도움이

$(function() { 
    var fakeGetJSON = function() { 
     return {"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"}; 
    }; 

    var viewModel = function (config) { 
     var self = this; 

     // initial call to mapping to create the object properties 
     ko.mapping.fromJS(config, {}, self); 

     this.get_updates = function() { 
      ko.mapping.fromJS(fakeGetJSON(), {}, self); 
     };    
    }; 

    // create viewmodel with default structure so the properties are created by 
    // the mapping plugin 
    var vm = new viewModel({ state: "M", qualities: [], name: "Foo" }); 

    function poll() 
    { 
     setTimeout(function(){ 
      vm.get_updates(); 
      poll(); 
     }, 3000) 
    } 

    // only one call to applybindings   
    ko.applyBindings(vm); 
    poll(); 
}); 

http://jsfiddle.net/madcapnmckay/NCn8c/

그리고 예를 들어 HTML

<h1>Name <span data-bind="text: name"></span></h1> 
<h2>State <span data-bind="text: state"></span></h2> 
<ul data-bind="foreach: qualities"> 
    <li data-bind="text: $data"></li> 
</ul> 

희망.

+0

고맙습니다. 다른 의문이 있습니다. 어떻게 위에서 언급 한 객체의 배열 인 JSON을 매핑 할 수 있습니까? 예 : '{{상태 ":"R ","자질 ": ["ABC ","XYZ ","324 "],"이름 ":"ABC "}, {"상태 " –

+1

다음은 실제 실행되는 업데이트 된 jsFiddle입니다. ","Y ","Y ","Y " (변경된 JS 리소스 URL 업데이트) http://jsfiddle.net/NCn8c/51/ – ClearCloud8

관련 문제