2013-04-26 39 views
7

Newbie in Knockout, cũng là một nhà thiết kế mặt trước vì vậy tôi cần nói chuyện đơn giản.Tìm nạp hoặc gửi dữ liệu từ biểu mẫu bằng cách sử dụng knockout.js

Tôi có biểu mẫu mà tôi cần gửi tới cơ sở dữ liệu và sau đó truy xuất từ ​​cơ sở dữ liệu sau.

Vui lòng giải thích các thuật ngữ rất đơn giản về cách tạo ví dụ làm việc để minh họa cách lưu và đăng biểu mẫu?

Từ hướng dẫn loại trực tiếp: http://knockoutjs.com/documentation/json-data.html Tôi hiểu về việc nhận và gửi dữ liệu json. Dữ liệu json được so khớp với biểu mẫu như thế nào? Bản đồ là gì và có một plugin hay ví dụ dễ dàng về cách ánh xạ dữ liệu json trở lại biểu mẫu của tôi không? Về cơ bản, làm thế nào để tôi làm những gì được bình luận bên trong các ví dụ mã loại trực tiếp dưới đây?

Tìm nạp dữ liệu:

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

Gửi dữ liệu:

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

Hãy đọc sách này - http://knockoutjs.com/documentation/submit-binding.html - và điều này - http://knockoutjs.com/documentation/value-binding.html - là cách tốt nhất. –

Trả lời

13

hình thức đơn giản

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

mô hình nhìn đơn giản

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 Mát mẻ – Developerzzz

Các vấn đề liên quan