2. 程式人生 > >RequireJS與Backbone簡單整合

RequireJS與Backbone簡單整合

阿新 • • 發佈：2019-01-15

前言

昨天我們一起學習了Backbone，最後做了一個備忘錄的例子，說是做了不如說是看了下官方提供的例子，所以最終我感覺我們還是沒能掌握Backbone，今天還得做個其它例子先。

然後前面也只是草草學習了RequireJS，沒做demo，這個週末又在看電影打遊戲睡覺瞎折騰，轉眼就週日下午了，突然詩性大起，於是作詩一首先：

古有通宵看A片，今有徹夜碼程式碼

好吧，我們開始今天的學習吧，我們今天先用backbone做一個通訊錄的東西，然後使用requireJS組裝之。

部分參考：the5fire的技術部落格

簡單例子

做之前我們先來個簡單的例子：

 1 <html xmlns
 
="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <div id="contactapp">
 7         <header>
 8             <h1>
 9                 通訊錄</h1>
10         </header>
11         <section id="main"
 
>
12             <ul id="contact-list">
13             </ul>
14         </section>
15         <div class="create">
16             <input type="button" value="增加（彈出框）" id="addDia" />
17         </div>
18     </div>
19 </body>
20 <script src="js/jquery.js"
 
 type="text/javascript"></script>
21 <script src="js/underscore.js" type="text/javascript"></script>
22 <script src="js/backbone.js" type="text/javascript"></script>
23 <script type="text/javascript">
24     (function ($) {
25         var Contact = Backbone.Model.extend({
26             //建立一個contact物件，擁有name屬性
27             name: null
28         });
29         var ContackList = Backbone.Collection.extend({
30             initialize: function (models, options) {
31                 //contact集合
32                 this.bind('add', options.view.addOne);
33             }
34         });
35         var AppView = Backbone.View.extend({
36             el: $('body'),
37             initialize: function () {
38                 //例項化集合，並傳入AppView物件
39                 this.contacts = new ContackList(null, { view: this });
40             },
41             events: {
42                 'click #addDia': 'addDia'
43             },
44             addDia: function () {
45                 var name = prompt('請輸入姓名');
46                 var c = new Contact({ name: name });
47                 this.contacts.add(c);
48             },
49             addOne: function (model) {
50                 $('#contact-list').append('<li>' + model.get('name') + '</li>');
51             }
52         });
53         var app = new AppView();
54     })(jQuery);
55 </script>
56 </html>

PS:感謝the5fire給出的例子，我和我的小夥伴一下都明白了。。。。

以上程式碼涉及到Backbone三個部分：View、Model、Collection，我們在addOne裡面使用了jquery繫結dom以後會將之消除。

各位請看這個程式碼：

this.bind('add', options.view.addOne);

在集合中綁定了add事件，在addDia最後執行了，然後觸發集合的事件，才最後將dom新增完成。

知識回顧（參考the5fire）

the5fire關於backbone的文章寫的很好（http://www.the5fire.com），我們一起來看看順便回顧下我們的知識。

model

Man = Backbone.Model.extend({
        initialize: function(){
            alert('Hey, you create me!');
        }
    });
var man = new Man;

這個是一個model最簡單的model，initialize中的方法一來就會執行，這裡就會彈出框：

物件賦值

Man = Backbone.Model.extend({
    initialize: function () {
        alert('Hey, you create me!');
    },
    defaults: {
        name: '張三',
        age: '38'
    }
});
var man = new Man;
alert(man.get('name'));
//man.set({ name: 'the5fire', age: '10' });

若是不賦值就使用預設值，若是賦值則採用給的值。

事件與方法

Man = Backbone.Model.extend({
    initialize: function(){
        alert('Hey, you create me!');
        //初始化時繫結監聽
        this.bind("change:name",function(){
            var name = this.get("name");
            alert("你改變了name屬性為：" + name);
        });
    },
    defaults: {
        name:'張三',
        age: '38'
    },
    aboutMe: function(){
        return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
    }
});
var man = new Man;
man.set({name:'the5fire'})  //觸發繫結的change事件，alert。

可以定義方法aboutMe，也可以在initialize中繫結事件以監聽某個屬性的變化。

驗證及錯誤提示

Man = Backbone.Model.extend({
    initialize: function () {
        this.bind("error", function (model, error) {
            alert(error);
        });
    },
    validate: function (attributes) {
        if (attributes.name == '') {
            return "name不能為空！";
        }
    },
});
var man = new Man;
man.set({ name: '' }); //根據驗證規則，彈出錯誤提示。

此處驗證不通過便會觸發錯誤提示。

PS:經測試並沒有提示，問題後面跟進

PS：最後證明有反應，我除錯頁面用錯了

物件持久化

物件持久化可以是伺服器也可以是本地儲存，具體就不展開了。

collection

集合其實就是model的有序集合，經過週末的學習，我們應該比較熟悉了：

Book = Backbone.Model.extend({
    defaults: {    // 感謝網友藍色動力指正改為defaults
        title: 'default'
    },
    initialize: function () {
        //alert('Hey, you create me!');
    }
});
BookShelf = Backbone.Collection.extend({
    model: Book
});
var book1 = new Book({ title: 'book1' });
var book2 = new Book({ title: 'book2' });
var book3 = new Book({ title: 'book3' });
//var bookShelf = new BookShelf([book1, book2, book3]); 
//注意這裡面是陣列,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基於underscore這個js庫，還可以使用each的方法獲取collection中的資料
bookShelf.each(function (book) {
    alert(book.get('title'));
});

fetch

我們若是要與伺服器通訊獲取資料，需要先為bookshelf定義url：

bookShelf.fetch({ url: '/getbooks/', success: function (collection, response) {
    collection.each(function (book) {
        alert(book.get('title'));
    });
}, error: function () {
    alert('error');
}
});
//對應的BookShelf的返回格式如下：
[{'title':'book1'},{'title':'book2'}.....]

此後我們需要將頁面的dom與資料同步，所以會用到reset事件;

bookShelf.bind('reset',showAllBooks);
showAllBooks = function(){
    bookShelf.each(function(book){
        ​//將book資料渲染到頁面。
    });
}
 1 <html>
 2 <head>
 3     <title>the5fire-backbone-collection</title>
 4 </head>
 5 <body>
 6 </body>
 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 8 <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
 9 <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
10 <script>
11 (function ($) {
12     //collection是一個簡單的models的有序集合
13     //1、一個簡單的例子
14 
15     Book = Backbone.Model.extend({
16         defaults : {    // 感謝網友藍色動力指正改為defaults
17             title:'default'
18         },
19         initialize: function(){
20             //alert('Hey, you create me!');
21         }
22     });
23     BookShelf = Backbone.Collection.extend({
24         model : Book
25     });
26 
27     var book1 = new Book({title : 'book1'});
28     var book2 = new Book({title : 'book2'});
29     var book3 = new Book({title : 'book3'});
30 
31     //var bookShelf = new BookShelf([book1, book2, book3]); //注意這裡面是陣列,或者使用add
32     var bookShelf = new BookShelf;
33     bookShelf.add(book1);
34     bookShelf.add(book2);
35     bookShelf.add(book3);
36     bookShelf.remove(book3);
37     /*
38     for(var i=0; i<bookShelf.models.length; i++) {
39         alert(bookShelf.models[i].get('title'));
40     }
41     */
42     //基於underscore這個js庫，還可以使用each的方法獲取collection中的資料
43     bookShelf.each(function(book){
44         alert(book.get('title'));
45     });
46 
47     //2、使用fetch從伺服器端獲取資料,使用reset渲染
48     bookShelf.bind('reset', showAllBooks);
49     bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
50         collection.each(function(book){
51             alert(book.get('title'));
52         });
53     },error:function(){
54         alert('error');
55     }});
56     showAllBooks = function(){
57         bookShelf.each(function(book){
58             ​//將book資料渲染到頁面。
59         });
60     }
61     //上述程式碼僅僅均為可正常執行的程式碼，不過關於伺服器端的例項在後面會有。
62 })(jQuery);
63 </script>
64 </html>
完整參考程式碼

Router（之前好像沒看到）

之前我們學習的時候好像錯過了Router了，路由的出現是想控制URL呢，Backbone.Router會把#標籤當做url路徑。

 1 <html>
 2 <head>
 3     <title>the5fire-backbone-router</title>
 4 </head>
 5 <body>
 6     <a href="#/posts/120">Post 120</a>
 7 <a href="#/download/user/images/hey.gif">download gif</a>
 8 <a href="#/dashboard/graph">Load Route/Action View</a>
 9 </body>
10 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
11     <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
12     <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
13     <script>
14     (function ($) {
15         //Backbone中的router，見名知意，router有路由的意思，顯然這裡是要控制url的。
16         //Backbone.Router會把你連線中的#標籤當做是url路徑
17         /**
18         //1、來看一個簡單的例子
19         var AppRouter = Backbone.Router.extend({
20             routes: {
21                 "*actions" : "defaultRoute"
22             },
23             defaultRoute : function(actions){
24                 alert(actions);
25             }
26         });
27 
28         var app_router = new AppRouter;
29 
30         Backbone.history.start();
31 
32 
33         //2、既然是對url進行匹配那麼它應該不僅僅只是簡單的靜態匹配，應該具有傳遞引數的功能，所以下面再來一個動態的router的例子.
34         var AppRouter = Backbone.Router.extend({
35             routes: {
36                 "/posts/:id" : "getPost",
37                 "*actions" : "defaultRoute"
38             },
39             getPost: function(id) {
40                 alert(id);
41             },
42             defaultRoute : function(actions){
43                 alert(actions);
44             }
45         });
46 
47         var app_router = new AppRouter;
48 
49         Backbone.history.start();
50         **/
51         //從上面已經可以看到匹配#標籤之後內容的方法，有兩種：一種是用“:”來把#後面的對應的位置作為引數；還有一種是“*”，它可以匹配所有的url，下面再來演練一下。
52         var AppRouter = Backbone.Router.extend({
53             routes: {
54                 "/posts/:id" : "getPost",
55                 "/download/*path": "downloadFile",  //對應的連結為<a href="#/download/user/images/hey.gif">download gif</a>
56                         "/:route/:action": "loadView",      //對應的連結為<a href="#/dashboard/graph">Load Route/Action View</a>
57                 "*actions" : "defaultRoute"
58             },
59             getPost: function(id) {
60                 alert(id);
61             },
62             defaultRoute : function(actions){
63                 alert(actions);
64             },
65             downloadFile: function( path ){
66                 alert(path); // user/images/hey.gif
67             },
68             loadView: function( route, action ){
69                 alert(route + "_" + action); // dashboard_graph
70             }
71         });
72 
73         var app_router = new AppRouter;
74 
75         Backbone.history.start();
76 
77     })(jQuery);
78     </script>
79 
80 </html>
路由的例子

我們暫時不管這個，否則任務完成不了了。

View

這個看完，我們就要繼續今天的學習了，這裡用了太多時間啦。

backbone的view是用來顯示model資料到頁面的，同時監聽dom事件並相應變化。

來看看我們的頁面主體：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <div id="search_container">
 7     </div>
 8     <script type="text/template" id="search_template">
 9         <label><%= search_label %></label>
10         <input type="text" id="search_input" />
11         <input type="button" id="search_button" value="Search" />
12     </script>
13 </body>
14 <script src="js/jquery.js" type="text/javascript"></script>
15 <script src="js/underscore.js" type="text/javascript"></script>
16 <script src
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
RequireJS與Backbone簡單整合

     
 前言
昨天我們一起學習了Backbone，最後做了一個備忘錄的例子，說是做了不如說是看了下官方提供的例子，所以最終我感覺我們還是沒能掌握Backbone，今天還得做個其它例子先。
然後前面也只是草草學習了RequireJS，沒做demo，這個週末又在看電影打遊戲睡覺瞎折騰，轉眼就週日下午了，突然詩性大起， 



  
 

    


    
    
Springboot與MyBatis簡單整合

     
 方法   jar   啟動   over   resultmap   prop   toc   系統   服務器   之前搭傳統的ssm框架，配置文件很多，看了幾天文檔才把那些xml的邏輯關系搞得七七八八，搭起來也是很麻煩，那時我完全按網上那個demo的版本要求（jdk和tomcat），所以最後是各種問題沒成 



  
 

    


    
    
spring boot 與 shiro的簡單整合使用

     
 scheduler   div   turn   map   用戶   ttr   algorithm   pen   enc   shrio官網：https://shiro.apache.org/
Apache Shiro是一個功能強大且易於使用的Java安全框架，可執行身份驗證，授權，加密和會話管理。借助 



  
 

    


    
    
springboot2.0x全系列一springboot2.0x整合ActiveMQ（簡單整合與應用）

     
  
 
 ActiveMQ ActiveMQ 是Apache出品，最流行的，能力強勁的開源訊息匯流排。ActiveMQ 是一個完全支援JMS1.1和J2EE 1.4規範的 JMS Provider實現，儘管JMS規範出臺已經是很久的事情了，但是JMS在當今的J2EE應用中間仍然扮演著特殊的地位。 特性 多種語 



  
 

    


    
    
PyQt5入門以及與OpenCV的簡單整合

     
  
 
 PyQt5與OpenCV簡介 
 PyQt 
 PyQt是Python語言的GUI程式設計解決方案之一。可以用來代替Python內建的Tkinter。其它替代者還有PyGTK、wxPython等。與Qt一樣，PyQt是一個自由軟體。 
 PyQt的開發者是英國的“Riverbank Computin 



  
 

    


    
    
Spring與Struts2的整合其實很簡單

     
 
                下面是整合步驟

一、複製jar檔案。
把struts2-spring-plugin-..*.jar和spring.jar複製到Web工程的WEB-INF/lib目錄下，並且還需要複製commons-logging.jar。

二、配置Struts.objectFactory 



  
 

    


    
    
Tomcat 的簡單應用  &  與eclipse的整合

     
 
							
							
							

Tomcat的簡單安裝 & 與Eclipse的整合





一、java web伺服器之Tomcat

（一）、幾種常見的文字伺服器

Tomcat：
由Apache組織提供的一種Web伺服器
提供對jsp和Servlet的支援。它是一種輕量級的j 



  
 

    


    
    
RabbitMQ實踐--與Spring的簡單整合操作

     
 
							
							
							瞭解RabbitMQ



與Spring整合

spring支援與rabbit的快速整合

pom.xml

需要的jar包

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="ht 



  
 

    


    
    
Quartz與spring的簡單整合__親測

     
  
  
  
 Quartz是OpenSymphony開源組織在Job scheduling領域的開源專案,它可以與J2EE與J2SE應用程式相結合也可以單獨使用。Quartz可以用來建立簡單或為執行十個，百個，甚至是好幾萬個Jobs這樣複雜的日程式表。Jobs可以做成標準的Java元件或 EJBs。 
  



  
 

    


    
    
SpringMVC與Shiro的最簡單整合（不包含許可權管理）

     
 
                
1.Maven 引入依賴



<dependency>
   		<groupId>org.springframework</groupId>
   		<artifactId>spring-beans</artifa 



  
 

    


    
    
RabbitMQ（三）：RabbitMQ與Spring Boot簡單整合

     
 RabbitMQ是目前非常熱門的一款訊息中介軟體，不管是網際網路大廠還是中小企業都在大量使用。Spring Boot的興起，極大地簡化了Spring的開發，本文將使用Spring Boot與RabbitMQ進行簡單整合，實現生產和消費訊息。
配置
Spring Boot使用了這麼久，套路差不多摸清楚了。Spr 



  
 

    


    
    
怎樣把報表放到網頁中顯示（Web頁面與報表簡單集成樣例）

     
 nal   嵌入   自己   rim   框架   ram   art   ner   prim   

1.問題描寫敘述
如今用戶開發的系統基本上趨向於BS架構的瀏覽器/server模式。這些系統可能由不同的語言開發。如HTML、ASP、JSP、PHP等。因此須要將制作好的報表嵌入到這些頁面中。
Fine 



  
 

    


    
    
cas4.2.7與shiro進行整合

     
 exce   cor   lec   ces   nco   Coding   schema   enc   pattern   準備工作
　　cas單點登錄開始前準備，請參考cas4.2.7實現單點登錄。
與shiro進行整合
　　註：準備工作的基礎上，對cas客戶端進行如下改進。
　　引入相關ja 



  
 

    


    
    
Spring與Quartz的整合實現定時任務調度

     
 java代碼   content   sta   一個bug   next   小時   change   nsa   發現   
Spring與Quartz的整合實現定時任務調度
博客分類： 

Java Web

SpringQuartz任務調度定時任務 

最近在研究Spring中的定時任務功能，最好的 



  
 

    


    
    
SparkSQL與Hive的整合

     
 cto   home   添加   usr   onf   cal   apach   local   -c     其他的配置hive基本配置就不記錄了！！
1. 拷貝$HIVE_HOME/conf/hive-site.xml $SPARK_HOME/conf/2. 在$SPARK_HOME/conf/目錄 



  
 

    


    
    
JDK環境變量與Java簡單語法介紹

     
 jdk環境變量   java   Dos界面輸入路徑參數：    如果沒有配置JDK環境變量的話，常用的編譯方式就是把javac.exe程序所在的路徑復制粘貼到cmd中，然後加上java文件的所在路徑進行編譯：含義：找到javac.exe程序，然後告訴需要編譯的路徑（參數） 註意：兩者之間要敲一個空格。PAT 



  
 

    


    
    
Springfox與swagger的整合使用

     
 line   沒有   收集   此外   .com   意思   map   文檔   部署項目   一、前言
讓我們先理一下springfox與swagger的關系。
swagger是一個流行的API開發框架，這個框架以“開放API聲明”（OpenAPI Specification，OAS）為基礎，對整個 



  
 

    


    
    
c++ 與 lua 簡單交互參數介紹

     
 nil   mod   一次   toc   clip   main   copyto   新的   world   原文http://blog.csdn.net/johnice/article/details/5517431
 
一、第一個例子 Hello World ！
 
 


[c-sharp] v 



  
 

    


    
    
0545-配置apache實現與php的整合

     
 linux整合###########接下來配置apache httpd.conf來支持php####
[[email protected] php-5.3.27]# cd /application/apache/conf/
[[email protected] conf]# vi http 



  
 

    


    
    
RequireJS 與 SeaJS 的異同

     
 module   第三方   服務器   get   scrip   jquery   多說   服務   理念   相同之處
RequireJS 和 SeaJS 都是模塊加載器，倡導的是一種模塊化開發理念，核心價值是讓 JavaScript 的模塊化開發變得更簡單自然。
不同之處
兩者的區別如下：