Practice Backbone.js with PHP :: Example 1

ゝ一纸荒年。 2022-10-02 02:58 42阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

Assume that you have basic knowledge on php, backbone.js, underscore.js and jquery.  
We will use Firefox browser with firebug to test.

Actually here we will learn how to use model, view and router of backbone.js and fetch data from server using php.

[Demo][]

[Download Source][]

First of all we will create directory structure.

create above directory structure in you web\_root. and put those js files in js directory (those will be found in source, link at bottom or you can get those by google).

now we will create a [Boilerplate][] in example\_1 directory named “index.html”, so create a new index.html file under example\_1 directory and write below code in this file.

<table style="border:1px solid #E7E7E7;width:640px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       &lt;!DOCTYPEhtml&gt; 
     </div> 
     <div>
       &lt;html&gt; 
     </div> 
     <div>
       &lt;head&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;php backbone.js example 1&lt;/title&gt; 
     </div> 
     <div>
       &lt;/head&gt; 
     </div> 
     <div>
       &lt;body&gt;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- JavaScript --&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/jquery-2.0.3.min.js"&gt;&lt;/script&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/underscore-min.js"&gt;&lt;/script&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/backbone-min.js"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &lt;/body&gt; 
     </div> 
     <div>
       &lt;/html&gt; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

> Backbone’s only hard dependency is Underscore.js ( >= 1.5.0). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include jQuery, and json2.js for older Internet Explorer support. (Mimics of the Underscore and jQuery APIs, such as Lo-Dash and Zepto, will also tend to work, with varying degrees of compatibility.)

Now create an new example\_1.js file in js directory, and include it at bottom of all script to our Boilerplate index.html file, then our index.html file will look like below.

<table style="border:1px solid #E7E7E7;width:640px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       &lt;!DOCTYPEhtml&gt; 
     </div> 
     <div>
       &lt;html&gt; 
     </div> 
     <div>
       &lt;head&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;php backbone.js example 1&lt;/title&gt; 
     </div> 
     <div>
       &lt;/head&gt; 
     </div> 
     <div>
       &lt;body&gt;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- JavaScript --&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/jquery-2.0.3.min.js"&gt;&lt;/script&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/underscore-min.js"&gt;&lt;/script&gt; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/backbone-min.js"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&lt;scriptsrc="../js/example_1.js"&gt;&lt;/script&gt; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &lt;/body&gt; 
     </div> 
     <div>
       &lt;/html&gt; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

and open it with you favorite editor.  
In example\_1.js, we will first create a “Message” model, and add a default property called “message” like below.

Now we will access our example\_1 to test that is our model working or not. so url[http://localhost/php-backbone/example\_1/][http_localhost_php-backbone_example_1] on FireFox (this url for mine as i follow above directory structure so your url can not be like it, so use your url to access example\_1). Open Firebug console, create a object of MessageModel and access its message property like below.

run this and will get output like below screenshot.

![backbone.js, php][backbone.js_ php]

model default property access

After above model build backbone router like below.

<table style="border:1px solid #E7E7E7;width:640px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       varMessageRouter = Backbone.Router.extend({ 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;routes:{ 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"":"displayMessage" 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;}, 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;displayMessage:function() { 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;varmessageModel =newMessageModel(); 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(messageModel.get("message"));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;} 
     </div> 
     <div>
       }); 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       varmessageRouter =newMessageRouter(); 
     </div> 
     <div>
       Backbone.history.start(); 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

here we build a router and added a route and assigned a function “displayMessage”, in this function we created a model object for “MessageModel” and print its “message” property in console.  
to execute this router we created object of this router. then we start backbone history to ask backbone to monitoring hashchange events, and dispatching routes.

Now if you access this example\_1 from browser then you will see output “Text Message” on firebug console.

To create View, first we need to change our index.html under example\_1 directory.  
in body tag, we will add a div tag in which we will display our message, and a template which will use to contain message text. so add below html come in body tag before script tags.

here in template “<%= … %>” used to interpolate variable message.  
So our template is ready, now we will create backbone view. add below code in example\_1.js after model code.

<table style="border:1px solid #E7E7E7;width:640px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       varMessageView = Backbone.View.extend({ 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;template:_.template($('#tpl-hello-backbone').html()), 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;render:function(eventName) { 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this.el).html(this.template(this.model.toJSON())); 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;returnthis; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;} 
     </div> 
     <div>
       }); 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

here we assigned javascript template and created render function which used to render the view template from model data.  
Now we have to call this render function from router function “displayMessage”. change this function as below.

<table style="border:1px solid #E7E7E7;width:667px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       displayMessage:function() { 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;varmessageModel =newMessageModel();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;varmessageView =newMessageView({model:messageModel});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;$('#msg').html(messageView.render().el); 
     </div> 
     <div>
       } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

here we created object of MessageView with our messageModel. and called view’s render function and put its output in our “\#msg” div. there “el” is a DOM element which created from the view’s tagName, className, id and attributes properties, if specified. If not, el is an empty div.

Now if you access example\_1 then you will see “Text Message” in browser.

Above we completed below steps::

1) Build directory structure  
2) Created Boilerplate for backbone.js  
3) Created backbone.js model  
4) Created backbone.js router  
5) Created backbone.js view

Now its time to get data from server (using php) and display it, we have already completed most of work, now we will just fetch data from server using our MessageModel.

Create “example\_1.php” file in api directory and write one code in it like below.

here we just echo a string followed by json structure.

Then we need modify our model little bit that just add “urlRoot” property with vlaue “../api/example\_1.php”, so change our model like below.

Then change the “displayMessage” function in backbone router like below.

<table style="border:1px solid #E7E7E7;width:640px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;color:#AFAFAF;background:none;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td style="vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;background:none;"> 
    <div> 
     <div>
       displayMessage:function() { 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;varmessageModel =newMessageModel(); 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;varmessageView =newMessageView({model:messageModel}); 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;messageModel.fetch({ 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function() { 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#msg').html(messageView.render().el); 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;}); 
     </div> 
     <div>
       } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

here we only use “messageModel.fetch()” function to collect data for this model from server. and after successful fetch we are calling render function. now if you access exmaple\_1 then you can see output “Hello Backbonejs” in your browser.

if you can see this text then Congratulation :) , if not then you can post comment, we will fix it together.

[Demo][]

[Download Source][]

Here you can find [Second example of backbone.js and php][].

转载于:https://my.oschina.net/uniquejava/blog/532901

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/0901de91e7354abf86981dbd545a0ffe.png
[Demo]: http://php-backbone.gopagoda.com/example_1/
[Download Source]: https://github.com/foysal-mamun/php-backbone
[Boilerplate]: http://en.wikipedia.org/wiki/Boilerplate_%28text%29
[http_localhost_php-backbone_example_1]: http://localhost/php-backbone/example_1/
[backbone.js_ php]: /images/20220113/7430cbc2cc464e81b0648569926b6c41.png
[Second example of backbone.js and php]: https://foysalmamun.wordpress.com/2013/10/27/practice-backbone-js-with-php-example-2-2/