2013-04-26 12 views
7

Nowicjusz w Knockout, także projektant front-end, więc potrzebuję prostego przemówienia.Pobieranie lub wysyłanie danych z formularza za pomocą knockout.js

Mam formularz, który muszę wysłać do bazy danych, a następnie pobrać z bazy danych później.

Proszę wyjaśnić w bardzo prosty sposób, jak stworzyć przykład ilustrujący zapisanie i opublikowanie formularza?

Samouczek z nokautem: http://knockoutjs.com/documentation/json-data.html Rozumiem, że otrzymuję i wysyłam dane json. W jaki sposób dane json są dopasowywane do formularza? Co to jest mapowanie i czy istnieje wtyczka lub prosty przykład, jak zmapować dane json z powrotem do mojego formularza? Zasadniczo, w jaki sposób zrobić to, co jest komentowane w poniższych przykładach kodu knockout?

pobrać dane:

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

wysyłać dane:

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

Pomyśl o przeczytaniu tego - http://knockoutjs.com/documentation/submit-binding.html - i to - http://knockoutjs.com/documentation/value-binding.html - jest najlepszym sposobem. –

Odpowiedz

13

prosty formularz

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

prosty model widok

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 Cool budy – Developerzzz

Powiązane problemy