Kendo MVVM用遠程數據源創建新記錄

Question

我想我錯過了一些簡單的東西，但我找不到任何示例顯示如何做到這一點...另外，請原諒我，如果我使用的一些術語是錯的。

我只是想使用綁定到Kendo Observable對象的HTML表單來在我的遠程數據源中創建一條新記錄。

我看過的所有例子都展示瞭如何編輯現有記錄，但這不是我正在尋找的東西（至少現在不是）。

我創建了一個Fiddle http://jsfiddle.net/matbeard/fYfYz/2/，它帶有一個簡單的截至目前爲止的截圖。顯然它不會實際保存記錄，因爲創建網址並不指向任何地方，但我相信我可以處理該記錄。

有人請指點我正確的方向？謝謝。

而且因爲我不能沒有它張貼問題，這裏的一些代碼，從小提琴複製：

var model = kendo.data.Model.define({ 
id: "id", 
fields: { 
    id: { type: 'number' }, 
    field1: { type: 'string' }, 
    field2: { type: 'string' }, 
    field3: { type: 'string' } 
} 
}); 

var viewModel = kendo.observable({ 
dataSource: new kendo.data.DataSource({ 
    type: 'json', 
    transport: { 
     create: { 
      url: '/myurl/create', 
      dataType: 'json', 
      type: 'post' 
     } 
    }, 
    schema: { 
     data: 'data', 
     model: model 
    } 
}); 
}); 

kendo.bind($("#my-form"), viewModel); 

Answer 1

讓這樣做略有不同...

• 您的形式並不需要將（應該）綁定到包含DataSource的對象，因爲您實際上並未保存dataSource而只保存一條記錄。

所以，你應該定義模型爲：

var Model = kendo.data.Model.define({ 
    id: "id", 
    fields: { 
     id: { type: 'number' }, 
     field1: { type: 'string' }, 
     field2: { type: 'string' }, 
     field3: { type: 'string' } 
    } 
}); 

的DataSource現在成爲一個對象每本身：

var dataSource = new kendo.data.DataSource({ 
    type: 'json', 
    transport: { 
     create: "/myurl" 
    }, 
    schema: { 
     model: Model 
    } 
}); 

而且你觀察的對象有data元素是一個實例定義的Model（new Model()）。

var viewModel = kendo.observable({ 
    data: new Model(), 
    mySave: function(e){ 
     console.log("this", this.data); 
     dataSource.add(this.data); 
     e.preventDefault(); 
    } 
}); 

所以，你的形式應該是現在這樣的：

<form id="my-form"> 
    <input name="field1" data-bind="value:data.field1" type="text" /> 
    <input name="field2" data-bind="value:data.field2" type="text" /> 
    <input name="field3" data-bind="value:data.field3" type="text" /> 
    <button data-bind="click: mySave">Save</button> 
</form> 

你的jsfiddle modiefied http://jsfiddle.net/6LHx3/4/