如何保存Backbone.js模型數據？

Question

我更喜歡前端開發，最近開始在我的應用程序中探索Backbone.js。 我想將模型數據保存到服務器。

能否請您解釋一下保存模型數據的各種方法（使用json格式）。 我在服務器端使用Java。 此外，我主要看到REST用於保存數據。 由於我更喜歡​​前端開發，我不知道REST和其他類似的東西。

如果有人能用一些簡單的例子向我解釋這個過程，那就太好了。

Answer 1

基本上，模型具有稱為屬性的屬性，屬性是特定模型可能具有的各種值。 Backbone使用JSON對象作為使用采用JSON對象的各種方法填充這些值的簡單方法。 例：

Donuts = Backbone.Model.extend({
    defaults: {
        flavor: 'Boston Cream',  // Some string
        price: '0.50'  // Dollars
    }
});

要填充模型，有幾種方法可以實現。 例如，您可以通過傳入名為set（）的JSON OR use方法來設置模型實例，該方法接受屬性的JSON對象。

myDonut = new Donut({'flavor':'lemon', 'price':'0.75'});
mySecondHelping = new Donut();
mySecondHelping.set({'flavor':'plain', 'price':'0.25'});

console.log(myDonut.toJSON());
// {'flavor':'lemon', 'price':'0.75'}
console.log(mySecondHelping.toJSON());
// {'flavor':'plain', 'price':'0.25'}

因此，這使我們能夠保存模型並將它們保存到服務器中。 有關“什么是REST / RESTful？”的大量詳細信息。 並且很難在這里簡短地解釋所有這些。 特別是在REST和Backbone保存方面，要解決的問題是HTTP請求的語義以及您對數據的處理方式。

您可能習慣了兩種HTTP請求。 GET和POST。 在RESTful環境中，這些動詞對於Backbone假定的特定用途具有特殊含義。 當您想從服務器獲取某個資源時（例如我上次保存的甜甜圈模型，博客條目，計算機規范）並且該資源存在，您執行GET請求。 相反，當您要創建新資源時，請使用POST。

在進入Backbone之前，我從未觸及過以下兩種HTTP請求方法。 PUT和DELETE。 這兩個動詞對Backbone也有特定的含義。 當您想要更新資源時（例如，將檸檬甜甜圈的味道改為檸檬甜甜圈等），您可以使用PUT請求。 如果要同時從服務器中刪除該模型，請使用DELETE請求。

這些基礎知識非常重要，因為使用RESTful應用程序，您可能會有一個URI指定，它將根據您使用的請求動詞的類型執行相應的任務。 例如：

// The URI pattern
http://localhost:8888/donut/:id

// My URI call
http://localhost:8888/donut/17

如果我對該URI進行GET，它將獲得ID為17的甜甜圈模型。：id取決於您如何保存服務器端。 這可能只是數據庫表中的甜甜圈資源的ID。

如果我用新數據對該URI進行PUT，我會更新它，保存它。 如果我刪除該URI，那么它將從我的系統中清除它。

使用POST，由於您尚未創建資源，因此它將沒有已建立的資源ID。 也許我想要創建資源的URI目標就是：

http://localhost:8888/donut

URI中沒有ID片段。 所有這些URI設計都取決於您以及您對資源的看法。 但是關於RESTful設計，我的理解是你希望將你的動作動詞保存到你的HTTP請求中，並將資源作為名詞，使URI易於閱讀和人性化。

你還在聽我說嗎？ :-)

讓我們回過頭來思考Backbone。 Backbone很棒，因為它為你做了很多工作。 為了節省我們的甜甜圈和第二次幫助，我們只需這樣做：

myDonut.save();
mySecondHelping.save();

骨干很聰明。 如果您剛剛創建了一個甜甜圈資源，它將沒有來自服務器的ID。 它有一個叫做cID的東西，這是Backbone在內部使用的，但由於它沒有官方ID，它知道它應該創建一個新的資源並發送一個POST請求。 如果從服務器獲得模型，如果一切正確，它可能會有一個ID。 在這種情況下，當你保存（）Backbone假設你想要更新服務器，它將發送一個PUT。 要獲取特定資源，您需要使用Backbone方法.fetch（）並發送GET請求。 當您在模型上調用.destroy（）時，它將發送DELETE。

在前面的例子中，我從未明確告訴Backbone URI在哪里。 讓我們在下一個例子中這樣做。

thirdHelping = Backbone.Model.extend({
    url: 'donut'
});
thirdHelping.set({id:15});  // Set the id attribute of model to 15
thirdHelping.fetch();  // Backbone assumes this model exists on server as ID 15

Backbone將在http://localhost:8888/donut/15獲取第三個幫助它只會將/ donut stem添加到您的站點根目錄。

如果你還在我身邊，那很好。 我認為。 除非你感到困惑。 但無論如何我們都會跋涉。 第二部分是SERVER端。 我們已經討論了不同的HTTP動詞以及這些動詞背后的語義含義。 您，Backbone和您的服務器必須共享的含義。

您的服務器需要了解GET，POST，PUT和DELETE請求之間的區別。 正如您在上面的示例中看到的那樣，GET，PUT和DELETE都可以指向相同的URI http://localhost:8888/donut/07除非您的服務器可以區分這些HTTP請求，否則它將會非常混淆與該資源有關。

這是您開始考慮RESTful服務器端代碼的時候。 有些人喜歡Ruby，有些人喜歡.net，我喜歡PHP。 特別是我喜歡SLIM PHP微框架。 SLIM PHP是一個微框架，它具有非常優雅和簡單的工具集來處理RESTful活動。 您可以像上面的示例中那樣定義路由（URI），並且根據調用是GET，POST，PUT還是DELETE，它將執行正確的代碼。 還有其他類似於SLIM的解決方案，如Recess，Tonic。 我相信像Cake和CodeIgniter這樣的更大的框架也做類​​似的事情，盡管我喜歡minimal。 我說我喜歡Slim嗎？ ;-)

這是服務器上的摘錄代碼可能看起來（即具體關於路由。）

$app->get('/donut/:id', function($id) use ($app) {
    // get donut model with id of $id from database.
    $donut = ...

    // Looks something like this maybe:
    // $donut = array('id'=>7, 'flavor'=>'chocolate', 'price'=>'1.00')

    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body(json_encode($donut));
});

這里需要注意的是Backbone需要一個JSON對象。 如果可以，請始終讓您的服務器將內容類型指定為'application / json'並以json格式對其進行編碼。 然后，當Backbone收到JSON對象時，它知道如何填充請求它的模型。

使用SLIM PHP，路由的運行方式與上述類似。

$app->post('/donut', function() use ($app) {
    // Code to create new donut
    // Returns a full donut resource with ID
});
$app->put('/donut/:id', function($id) use ($app) {
    // Code to update donut with id, $id
    $response = $app->response();
    $response->status(200);  // OK!
    // But you can send back other status like 400 which can trigger an error callback.
});
$app->delete('/donut/:id', function($id) use ($app) {
    // Code to delete donut with id, $id
    // Bye bye resource
});

所以你幾乎完成了全程往返！ 去喝汽水。 我喜歡Diet Mountain Dew。 給我一個。

一旦您的服務器處理請求，對數據庫和資源執行某些操作，准備響應（無論是簡單的http狀態編號還是完整的JSON資源），然后數據將返回到Backbone進行最終處理。

使用save（），fetch（）等方法 - 您可以在成功和錯誤時添加可選的回調。 以下是我如何設置這個特殊蛋糕的示例：

Cake = Backbone.Model.extend({
    defaults: {
        type: 'plain',
        nuts: false
    },
    url: 'cake'
});

myCake = new Cake();
myCake.toJSON()  // Shows us that it is a plain cake without nuts

myCake.save({type:'coconut', nuts:true}, {
    wait:true,
    success:function(model, response) {
        console.log('Successfully saved!');
    },
    error: function(model, error) {
        console.log(model.toJSON());
        console.log('error.responseText');
    }
});

// ASSUME my server is set up to respond with a status(403)
// ASSUME my server responds with string payload saying 'we don't like nuts'

這個例子有幾個不同的東西。 您將看到我的蛋糕，而不是在保存之前設置（）屬性，我只是將新屬性傳遞給我的保存調用。 Backbone非常擅長在整個地方獲取JSON數據並像冠軍一樣處理它。 所以我想用椰子和堅果保存我的蛋糕。 （這是2個堅果嗎？）無論如何，我把兩個物品傳給了我。 屬性JSON對象和一些選項。 第一個，{wait：true}表示在服務器端跳閘成功之前不更新我的客戶端模型。 當服務器成功返回響應時，將發生成功回調。 但是，由於此示例導致錯誤（200以外的狀態將指示Backbone使用錯誤回調），我們將獲得沒有更改的模型的表示。 它應該仍然是平原而且沒有堅果。 我們還可以訪問服務器發回的錯誤對象。 我們發回了一個字符串，但它可能是具有更多屬性的JSON錯誤對象。 它位於error.responseText屬性中。 是的，'我們不喜歡堅果。'

恭喜。 您已經完成了第一次完整的往返旅程，從設置模型，保存服務器端，然后返回。 我希望這個回答史詩能讓你了解這一切是如何結合在一起的。 當然，我正在游歷的很多細節，但Backbone的基本思想，RESTful動詞，服務器端動作，響應都在這里。 繼續瀏覽Backbone文檔（與其他文檔相比，這是非常容易閱讀的），但請記住，這需要時間來包裝。 你保持的越多，你就會越流利。 我每天都會通過Backbone學習一些新知識，當你開始跳躍並看到你在這個框架中的流暢度增長時，它會變得非常有趣。 :-)

快樂的編碼！

編輯：可能有用的資源：

關於SO的其他類似答案： 如何使用Backbone生成模型ID

關於REST： http ： //rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction http://www.recessframework.org/page/towards-restful-php-5-basic-提示