2013-04-26 30 views
7

Knockout中的新手,也是前端設計師,所以我需要簡單的談話。使用knockout.js獲取或發送表單數據

我有一個表單,我需要發送到數據庫,然後從數據庫中檢索。

請用非常簡單的術語解釋如何生成一個工作示例來說明保存和發佈表單?

從基礎教程:http://knockoutjs.com/documentation/json-data.html 我瞭解獲取和發送json數據。 json數據如何與表單匹配?什麼是映射,是否有插件或如何將json數據映射回我的表單的簡單示例?基本上,我該如何做下面的挖空代碼示例中的評論?

獲取數據:

$.getJSON("/some/url", function(data) { 
    // Now use this data to update your view models, 
    // and Knockout will update your UI automatically 
}) 

發送數據:

var data = /* Your data in JSON format - see below */; 
$.post("/some/url", data, function(returnedData) { 
    // This callback is executed if the post was successful  
}) 
+0

認爲閱讀本文 - http://knockoutjs.com/documentation/submit-binding.html - 而這 - http://knockoutjs.com/documentation/value-binding.html - 是最好的方法。 – 2013-04-26 22:38:08

回答

13

簡單形式

<form data-bind="submit: onSubmit"> 
    <input data-bind="value : firstName"/> 
    <input data-bind="value : lastName"/> 
    <input type="submit" text="Submit!"/> 
</form> 
Response: <span data-bind="text : response"></span> 

簡單視圖模型

var viewModel = new function() 
{ 
    var self = this; 
    self.firstName = ko.observable("default first"); 
    self.lastName = ko.observable("default last"); 
    self.responseJSON = ko.observable(null); 
    self.onSubmit = function() 
    { 
     var data = JSON.stringify(
      { 
       first : self.firstName(), last : self.lastName()   
      }); // prepare request data 
     $.post("/echo/json", data, function(response) // sends 'post' request 
     { 
      // on success callback 
      self.responseJSON(response); 
     }) 
    } 
} 

ko.applyBindings(viewModel); 

JSFiddle DEMO

+0

@llya酷budy – Developerzzz 2013-05-13 18:40:39