Kendo, MVVM 텍스트를 바인딩하는 방법 : 필드를 원격 DataSource에 바인딩 하시겠습니까?

Question

viewmodel (observable) 클래스 생성자에서 정의 된 로컬 값에 대해이 작업 예제가 있지만 원격 데이터 소스가있을 때 작동하지 않는 것처럼 보입니다.

http://jsfiddle.net/hbuNP/7/

가 어떻게 원격 데이터 소스에 대한 작업을 아래와 같은 예를 얻을 수, 심지어는 가능하다?

<div id='root'> 
    <label>Remote Name: </label> 
    <span data-bind="text: firstName"><!--firstName--></span>, 
    <span data-bind="text: lastName"><!--lastName--></span> 

    <div> 
     <label>Remote Name: 
      <input data-bind="value: firstName" />, 
      <input data-bind="value: lastName" /> 
     </label> 
    </div> 
</div> 
<br/> 
<br/> 
<div id='local-root'> 
    <label>Local Name: </label> 
    <span data-bind="text: firstName"></span>, 
    <span data-bind="text: lastName"></span> 

    <div> 
     <label>Local Name: 
      <input data-bind="value: firstName" />, 
      <input data-bind="value: lastName" /> 
     </label> 
    </div> 
</div> 
<br/> 
<br/> 
<div id='test-ajax'> 
    <pre> 
    </pre> 
</div> 

$(document).ready(function(){ 
    /** 
    * #local-root example, binds to local data like in the examples 
    */ 
    var personLocalViewModel = kendo.observable({ 
     firstName: 'James', 
     lastName: 'Taylor' 
    }); 

    kendo.bind($('#local-root'), personLocalViewModel); 

    /** 
    * set's up a mock api endpoint for jquery and other libraries 
    */ 
    $.mockjax({ 
     url: "js/data/person.json", 
     contentType: "application/json", 
     responseText: { 
      firstName: 'James', 
      lastName: 'Taylor' 
     } 
    }); 

    /** 
    * test-ajax - proves mockajax works 
    */ 
    $.ajax({ 
     url: "js/data/person.json", 
     dataType:'json', 
     success:function(response){ 
      $('#test-ajax pre').text(JSON.stringify(response)); 
     } 
    }); 


    /** 
    * #root or remote-root, this dataSource is not bidning to the html, why? 
    */ 
    console.log('KENDO.js', kendo.data); 
    var personSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "js/data/person.json", 
       dataType: "json" 
      } 
     }, 
     schema:{ 
      parse: function(response){ 
       console.log('personSource.schema.parse',response); 
       return response; 
      }, 
      data: function(response){ 
       console.log('personSource.schema.data',response); 
       return response; 
      } 
     } 
    }); 

    //would this work? 
    var personViewModel = kendo.observable({ 
     dataSource: personSource 
    }); 

    //would this work? 
    var personViewModel2 = kendo.observable(personSource); 

    kendo.bind($('#root'), personViewModel); 


}); 

Answer 1

데이터 소스의 레코드 집합에서 작동하도록 기대하고있다. 구문 분석이나 스키마를 사용하면 문제를 해결할 수 있지만이 예제에서는 배열을 반환하기 위해 모의 아약스 호출을 변경했습니다.

$.mockjax({ 
    url: "js/data/person.json", 
    contentType: "application/json", 
    responseText: [{ 
     firstName: 'James', 
     lastName: 'Taylor' 
    }] 
}); 

첫 번째 문제는 데이터 소스를 설정했지만 결코 데이터를 채우지 않는 것입니다. 내가 배열에, 나는이 유사하여 바인딩을 업데이트에서 responseText 변경으로 내가 .read()

personSource.read(); 

에 전화를 추가 :

data-bind="text: dataSource.view()[0].firstName" 

마지막으로, here's an updated fiddle