2013-04-26 17 views
7

Knockout'taki yeni kullanıcı, ayrıca bir ön tasarımcının olması için düz konuşmaya ihtiyacım var.knockout.js kullanarak bir formdan veri alınıyor veya gönderiliyor

Veritabanına göndermem ve daha sonra veritabanından almam gereken bir form var.

Bir formu kaydetmeyi ve göndermeyi göstermek için çalışan bir örnek nasıl üretileceğini çok basit terimlerle açıklayınız.

Nakavt eğitiminden: http://knockoutjs.com/documentation/json-data.html Json verilerini almayı ve göndermeyi anlıyorum. Json verileri formla nasıl eşleştirilir? Haritalama nedir ve json verilerini tekrar formumda nasıl eşleyeceğine dair bir eklenti veya kolay bir örnek var mı? Temel olarak, aşağıdaki iptal kod örneklerinde yorumlanmış olanı nasıl yaparım?

Verileri Al:

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

Bunu bir düşünün - http://knockoutjs.com/documentation/submit-binding.html - ve bu - http://knockoutjs.com/documentation/value-binding.html - en iyi yoldur. –

cevap

13

basit formu

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

basit görünüm modeli:

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

Gönder VerileriJSFiddle DEMO

+0

@llya Serin budy – Developerzzz

İlgili konular