Dostosuj mój stary przepływ pracy do kręgosłupa

Question

Zaczynam budować nową aplikację i chciałbym użyć kręgosłupa jako mojego frameworka. Poniżej znajduje się podstawowy przepływ pracy, który podąża ta (i większość aplikacji).

Jaki jest najlepszy/najlepszy model do użycia ze szkieletem?

Stara droga
Użytkownik przechodzi do strony.
Wybiera "Utwórz nowy widżet"
Użytkownik otrzymuje formularz wypełniony danymi wejściowymi
W tym miejscu prawdopodobnie wziąłbym wprowadzone wartości (po przejściu podstawowego sprawdzania poprawności), zawiń je i wyślij na serwer za pomocą ajax żądanie
zapytanie wraca jako „OK”, a użytkownik przyjmuje gdzieś indziej (Ten krok nie jest do końca ważne)

Niektóre podstawowe pseudo-kod

// Grab values 
var userName = $('.UserName').val(), 
    dateOfBirth = $('.DateOfBirth').val(); 
    ... 
    ... 
    ... 

$.ajax({ 
    url: "/Webservices/ProcessStuff", 
    success: function(result){ 
    if (result) { 
    // Render something or doing something else 
    } else { 
    // Error message 
    } 
    }, 
    error: function() { 
    // Error message 
    } 
}); 

Backbone sposób
Używając tego samego przykładu jak powyżej; Zakładam, że mam model dla informacji o użytkowniku i widok do wyświetlenia danych wejściowych. Jednak przetwarzanie faktycznego połączenia z serwisem internetowym jest jedną z rzeczy, o których się nie mylę. Gdzie to musi iść? W modelu lub w widoku click jakiegoś przycisku "Przejdź"?

Model.UserInformation = Backbone.Model.extend({ username: null, dateOfBirth: null });

Może mieć również zbiór tych modeli Userinformation?
UserInformations = Backbone.Collection.extend({ model: Model.UserInformation' });

Więc dolnej linii co pytam jest ...
Jaki jest najlepszy sposób, aby osiągnąć tę funkcjonalność?
Jaki jest właściwy sposób na wykonywanie CRUD? Gdzie umieścić faktyczne wezwanie do usunięcia/aktualizacji/utworzenia/etc?

Answer 1

Masz dobry pomysł, a kręgosłup powinien ułatwiać wykonywanie zadań przy użyciu tego samego, podstawowego, wysokiego poziomu przeglądu przepływu pracy. Zauważ, że nadal będziesz używać jQuery do tej funkcji - będziesz to robił tylko poprzez organizacyjne aspekty typów Backbone.

Istnieje kilka kluczowych elementów, które będziemy chcieli w miejscu, z których większość już wspomniano:

• szkielet Zobacz koordynować elementy HTML z kodem JavaScript
• szkielet modelu do przechowywania wszystkich danych, które użytkownik wejście do elementów HTML
• serwer back-end, które mogą obsługiwać połączenia relaksującego JSON za pośrednictwem żądań AJAX z jQuery

myślę jedyne, czego nam brakuje to to, że model ma na sobie metodę save, która opakowuje całą logikę, aby wywołać trasy tworzenia/aktualizacji na serwerze zaplecza.Model ma również metodę delete do obsługi usuwania z serwera.

Jako bardzo prosty przykład, oto formularz, który renderuje szablon HTML na ekranie, gromadzi dane wejściowe użytkownika do modelu, a następnie zapisuje je na serwerze.

szablon

HTML:

<script id="myTemplate" type="text/x-jquery-tmpl"> 
    First name: <input id="first_name"><br/> 
    Last Name: <input id="last_name"><br/> 
    <button id="save">Save!</button> 
</script> 

kod do uruchomienia to:

MyModel = Backbone.Model.extend({ 
    urlRoot: "/myModel" 
}); 

MyView = Backbone.View.extend({ 
    template: "#myTemplate", 

    events: { 
    "change #first_name": "setFirstName", 
    "change #last_name: "setLastName", 
    "click #save": "save" 
    }, 

    initialize: function(){ 
    _.bindAll(this, "saveSuccess", "saveError"); 
    }, 

    setFirstName: function(e){ 
    var val = $(e.currentTarget).val(); 
    this.model.set({first_name: val}); 
    }, 

    setLastName: function(e){ 
    var val = $(e.currentTarget).val(); 
    this.model.set({last_name: val}); 
    }, 

    save: function(e){ 
    e.preventDefault(); // prevent the button click from posting back to the server 
    this.model.save(null, {success: this.saveSuccess, error: this.saveError); 
    }, 

    saveSuccess: function(model, response){ 
    // do things here after a successful save to the server 
    }, 

    saveError: function(model, response){ 
    // do things here after a failed save to the server 
    }, 

    render: function(){ 
    var html = $(this.template).tmpl(); 
    $(el).html(html); 
    } 
}); 

myModel = new MyModel(); 
myView = new MyView({model: myModel}); 
myView.render(); 
$("#someDivOnMyPage").html(myView.el); 

To daje szybki start dla postaci, która zapisuje nowy model z powrotem do serwera.

Istnieje kilka rzeczy, serwer musi zrobić:

• Zwraca kod ważny odpowiedzi HTTP (200 lub inne odpowiedzi, który mówi wszystko było „ok”)
• Powrót JSON, który był wysyłane na serwer, w tym wszelkie dane przypisane serwerowi do modelu, takie jak pole id.

Bardzo ważne jest, aby serwer robił te rzeczy i zawierał odpowiedź w polu id. Bez pola id z serwera, twój model nigdy nie będzie w stanie zaktualizować się, gdy ponownie zadzwonisz pod numer save. Będzie próbował ponownie utworzyć nową instancję na serwerze.

Szkielet używa atrybutu id modelu, aby określić, czy powinien utworzyć lub zaktualizować model podczas przesyłania danych do zaplecza. Różnica między utworzeniem nowego modelu a jego zapisaniem jest tylko atrybutem id. Nazywasz model save w modelu, czy jest to model nowy, czy zmieniony.

Usunięcie działa w ten sam sposób - po prostu wywołujemy model destroy i wywołuje ono połączenie z serwerem w celu zniszczenia. W przypadku niektórych elementów HTML z linkiem lub przyciskiem "usuń" do zdarzenia kliknięcia tego elementu HTML można dołączyć to samo, co w przypadku przycisku "Zapisz". Następnie w metodzie oddzwaniania dla usunięcia kliknij przycisk this.model.destroy() i przekaż dowolne parametry, takie jak wywołania zwrotne dotyczące sukcesu i błędów.

Należy pamiętać, że do modelu dołączono również model urlRoot. Ta lub url funkcja jest potrzebna w modelu, jeśli model nie jest częścią kolekcji. Jeśli model jest częścią kolekcji, kolekcja musi określać url.

Mam nadzieję, że to pomaga.

Answer 2

Jeśli "el" widoku jest znacznikiem formularza, prawdopodobnie można użyć wbudowanego obiektu zdarzenia do powiązania funkcji do przesłania, ale jeśli głównym elementem widoku jest coś innego, to potrzebujesz dołączyć obsługę kliknięcia w funkcji renderowania.