如何保存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-提示;