Kendo MVVM - 데이터 소스에 간단한 값 바인딩

Question

페이지의 입력을 Kendo MVVM의 데이터 소스에 바인딩하는 방법을 배우고 싶습니다.

<div id="configDiv"> 
    Call:<input data-bind="value: SystemCall" type="text" /><br /> 
    <button data-bind="click: save">Save</button> 
</div> 

그리고 다음 뷰 모델 : 간단하게 시작하려면, 나는 다음과 같은 HTML이 있다고

var self = this; 

    var Model = kendo.data.Model.define({ 
     id: "SystemId", 
     fields: { 
      SystemCall: { editable: true } 
     } 
    }); 

     self.ViewModel = kendo.observable({ 
      dataSource: new kendo.data.DataSource({ 
       transport: { 
        read: "/api/ServiceApi?method=Ref/SystemConfig/", 
        type: "GET" 
       }, 
       schema: { 
        model: Model 
       } 
      }), 
      save: function (e) { 
       alert("save config"); 
      }, 
     }); 
     kendo.bind($("#configDiv"), self.ViewModel); 

아이디어는 시스템 콜의 값이 바인딩 될 것 읽기 URL에서 JSON 형식으로 반환한다는 것입니다 HTML의 입력 필드에. 이것이 작동하지 않기 때문에 뭔가 잘못되었습니다 . 나는 이것보다 더 복잡한 것은 아무것도하지 않고 간단한 예제를 찾기 위해 그물을 샅샅이 뒤졌으며 그것을 찾을 수 없다. 시작하는 방법에 대한 도움은 으로 크게 평가 될 것입니다.

Answer 1

공유 할 수있는 완전한 예제가 없지만 몇 가지 사항을 지적 할 수 있습니다.

---

검도 데이터 소스는 서버 항목의 배열을 반환 할 것으로 예상, 그래서 서버가 예를 들어, JSON 단일 개체를 반환하는 경우 : 다음

{ 
    "SystemId": 1, 
    "SystemCall": "one" 
} 

그것을 무엇을해야할지 알 수 없습니다 그것은 배열이 아니기 때문에 그것과 함께. 그것은 예상 뭔가 같은 :

[ 
    { 
     "SystemId": 1, 
     "SystemCall": "one" 
    }, 
    { 
     "SystemId": 2, 
     "SystemCall": "two" 
    } 
] 

---

바인딩 귀하의 MVVM은 "시스템 호출"라는 이름의 속성이 없습니다 당신 때문에 바인딩을 "시스템 호출"그러나 당신의 ViewModel 개체를 작동하지 않습니다. 데이터 소스의 데이터 항목의 배열이 포함되어있을 때문에 이들은 보통 ListView를 각 데이터 항목을 표시하는 그리드 위젯에 결합되어 ViewModel.dataSource

---

의 항목들 중 하나의 내부에있을 것이다. ListView의 각 행 템플리트에는 해당 시스템에 대한 입력 요소가있을 수 있습니다. 당신의 Model에서

---

는 id 필드는이 같은 fields 목록에 포함되어야한다 :이 전체 응답 아니라는 것을 알고

var Model = kendo.data.Model.define({ 
    id: "SystemId", 
    fields: { 
     SystemId: { type: "number" }, // assuming this is a number. 
     SystemCall: { editable: true } 
    } 
}); 

---

,하지만 난에이 희망 최소한 올바른 방향으로 나아갈 수 있습니다.