如何保存Backbone.js模型数据？
我更加注重前端开发，最近开始将Backbone.js浏览到我的应用程序中。 我想将模型数据保存到服务器。
你能否解释我保存模型数据的各种方法（使用json格式）。 我在服务器端使用Java。 另外我主要看到REST被用来保存数据。 由于我更多的是前端开发，我不知道REST和其他类似的东西。
如果有人能够用一个简单的例子来解释我的过程，那将是非常好的。
基本上模型有一个叫属性的属性，它是某个模型可能具有的各种值。 Backbone使用JSON对象作为一种简单的方法来使用带有JSON对象的各种方法来填充这些值。 例：
Donuts = Backbone.Model.extend({ defaults: { flavor: 'Boston Cream', // Some string price: '0.50' // Dollars } }); 要填充模型，有几种方法可以这样做。 例如，您可以通过传入一个JSON来设置模型实例，或者使用一个名为set（）的方法来设置属性的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请求。 相反，当你想创build一个新的资源，你使用POST。
在进入Backbone之前，我甚至没有碰到以下两种HTTP请求方法。 PUT和DELETE。 这两个动词对骨干也有特定的含义。 当你想更新一个资源，（例如改变柠檬甜甜圈的味道，柠檬甜甜圈等），你使用PUT请求。 当您想要一起从服务器上删除该模型时，可以使用DELETE请求。
这些基础知识是非常重要的，因为使用REST风格的应用程序，您可能会拥有一个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，由于您尚未创build资源，因此它将不具有已build立的资源ID。 也许我想创build资源的URI目标是这样的：
http://localhost:8888/donut
URI中没有ID片段。 所有这些URIdevise都取决于您，您如何看待您的资源。 但是对于RESTfuldevise，我的理解是，您希望将对HTTP请求和资源的动作保持为使URI容易阅读和人性化的名词。
你还在吗？ 🙂
那么让我们回顾一下Backbone。 骨干是美好的，因为它为你做了很多工作。 为了节省我们的甜甜圈，第二个帮助，我们只是这样做：
myDonut.save(); mySecondHelping.save();
骨干是聪明的。 如果您刚刚创build了一个甜甜圈资源，它将不会有服务器的ID。 它有一个叫做cID的东西，这是Backbone在内部使用的，但是由于它没有正式的ID，它知道它应该创build一个新的资源并且发送一个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
骨干将获得第三个http://localhost:8888/donut/15它将简单地添加/甜甜圈干到你的网站的根。
如果你仍然在我身边，好的。 我认为。 除非你感到困惑。 但无论如何我们会跋涉 第二部分是SERVER端。 我们已经讨论了HTTP的不同动词以及这些动词背后的语义。 意思是你，骨干，和你的服务器必须共享。
您的服务器需要了解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的解决scheme，如Recess，Tonic。 我相信更大的框架，如Cake和CodeIgniter也做类似的事情，虽然我喜欢最小。 我说我喜欢苗条吗？ 😉
这是服务器上的摘录代码可能看起来（即专门关于路由）。
$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对象。 总是让你的服务器将内容types指定为“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。 给我一个也是。
一旦你的服务器处理了一个请求，对数据库和资源做一些事情，准备一个响应（不pipe它是一个简单的http状态号还是完整的JSON资源），那么数据就会返回到Backbone进行最终处理。
用你的save（），fetch（）等方法 – 你可以添加可选的callback成功和错误。 下面是我如何设置这个特殊的蛋糕的例子：
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'
这个例子有几个不同的东西。 你会看到，我的蛋糕，而不是保存之前设置（）的属性，我只是传入新的属性到我的保存调用。 骨干是相当忍者在所有的地方把JSON数据和处理像一个冠军。 所以我想用椰子和坚果保存我的蛋糕。 （这两个坚果？）无论如何，我通过了两个对象来保存。 属性JSON对象和一些选项。 第一个，{wait：true}表示在服务器端行程成功之前不更新我的客户端模型。 当服务器成功返回响应时，成功callback将发生。 然而，由于这个例子导致错误（200以外的状态会指示Backbone使用错误callback），所以我们得到了没有改变的模型表示。 它应该是平淡无味的。 我们也可以访问服务器发回的错误对象。 我们发回一个string，但它可能是JSON错误对象具有更多的属性。 这位于error.responseText属性中。 是的，我们不喜欢坚果。
恭喜。 你已经从build立一个模型开始第一次非常完整的往返，保存在服务器端，然后返回。 我希望这个答案史诗给你一个这样的一切如何在一起的想法。 当然，有很多细节我正在巡航，但Backbone保存，RESTful动词，服务器端动作，响应的基本概念在这里。 继续阅读Backbone文档（与其他文档相比，它非常容易阅读），但请记住，这需要时间来包装你的头。 你越留在这里，就越stream利。 我每天都会在Backbone上学到一些新东西，当你开始跳跃式发展并且看到你在这个框架中的stream畅性增长的时候，它会变得非常有趣。 🙂
快乐的编码！
编辑：可能有用的资源：
在SO上的其他类似的答案： 如何生成与骨干的模型ID
关于REST： http : //rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction http://www.recessframework.org/page/towards-restful-php-5-basic-提示;
