Kendo MVVM - 對數據源的簡單值綁定

我想了解如何將頁面上的輸入綁定到Kendo MVVM中的數據源。要開始簡單地說，說我有以下的HTML：Kendo MVVM - 對數據源的簡單值綁定

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

及以下視圖模型：

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

的想法是，系統調用的值以JSON格式返回從讀URL是綁定到html中的輸入字段。有些東西是錯誤的，因爲這不起作用。我已經在網上尋找一個簡單的例子，除了這個之外沒有什麼比這更復雜的，也找不到它。任何幫助如何開始將不勝感激。

來源

2014-07-15 Scott

我沒有一個完整的工作示例來分享，但我可以指出幾件事情。

劍道的DataSource期待你的服務器返回一個項目數組，所以如果你的服務器返回一個對象，例如JSON：

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

那麼它將不知道該怎麼辦與它，因爲它不是一個數組。該公司預計這樣的：

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

你MVVM結合不會工作，因爲你將其綁定到「系統調用」，但你的視圖模型對象沒有一個名爲「系統調用」屬性。那些將裏面的物品中的一個ViewModel.dataSource

由於一個DataSource預計包含數據項的陣列，它通常被綁定到一個ListView或網格插件來顯示每個數據項。 ListView中的每個行模板都可以具有該系統的輸入元素。

在你Model，則id場應列入fields這樣的名單：

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

我知道這是不是一個完整的答案，但我希望這在至少讓你朝着正確的方向前進...

來源

2014-07-16 14:18:25 CodingWithSpike

它確實有幫助，相當多。謝謝。 – Scott

Kendo MVVM - 對數據源的簡單值綁定

回答

相關問題