首页 > 代码库 > backbone.初步了解

backbone.初步了解

2024-07-20 11:56:46   221人阅读

 

　　当我们开发含有大量Javascript的web应用程序时，首先你需要做的事情之一便是停止向DOM对象附加数据。 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序，包括在HTML UI，Javascript逻辑和数据之间保持同步，都不复杂。 但对富客户端应用来说，良好的架构通常是有很多益处的。
　　Backbone将数据呈现为model, 你可以创建模型、对模型进行验证和销毁，甚至将它保存到服务器。 当UI的变化引起模型属性改变时，模型会触发"change"事件； 所有显示模型数据的视图会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。 — 当模型改变了，视图便会自动变化。
主要组成：
1.model：创建数据，进行数据验证，销毁或者保存到服务器上；
　　
　　
 
创建一个模型：  var student= Backbone.Model.extend({
       　　　　　　　　 defaults:{                     //。。。模型默认的属性
            　　　　　　　　　　　　id:1,
            　　　　　　　　　　　　pkid:0,
            　　　　　　　　　　　　name:‘‘,
           　　　　　　　　　　　　age:0
       　　　　　　　　　　　　　},
        　　　　　　　　urlRoot : ‘/info‘　　//......到后台的URL路劲
    });
2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类
创建几个集合：  var liststudent = Backbone.Collection.extend({
       　　　　　　 model:student           //..........model后跟你所需保存模型名
    });
重要方法：
1.fetch方法
　　　　

从服务器拉取集合的默认模型，成功接收数据后会重置（reset）集合。 options 支持 success 和 error 回调函数，回调函数接收 (collection, response) 作为参数。 可以委托 Backbone.sync 在随后处理个性化需求。 处理 fetch 请求的服务器应当返回模型的 JSON 数组。

2.save方法

通过委托 Backbone.sync 保存模型到数据库（或可替代的持久层）。 attributes 散  列表 (在 set) 应当包含想要改变的属性，不涉及的键不会被修改。 如果模型含有 validate 方法，并且验证失败，模型不会保存。 如果模型 isNew, 保存将采用 "create" (HTTP POST) 方法, 如果模型已经在服务器存在，保存将采用 "update" (HTTP PUT) 方法.

3destroy方法

通过委托 HTTP DELETE 请求到 Backbone.sync 销毁服务器上的模型. 接受 success 和 error 回调函数作为选项散列表参数。 将在模型上触发 "destroy" 事件，该事件可以通过任意包含它的集合向上冒泡。

实例：对表格进行增删
HTML代码：
<input type="text"><input type="text">
<button id=‘add‘>添加</button>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="main">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><a href="http://www.mamicode.com/#">删除</a> </td>
    </tr>
    </tbody>
</table>
JS代码：

<script type="text/javascript">  

  var studentm = Backbone.Model.extend({        //创建一个模型

　　　　　　urlRoot:‘/info‘    //集合外部的模型，通过指定 urlRoot 来设置生成基于模型 id 的 URLs 的默认 url 函数。

});    

var list = Backbone.Collection.extend({    //将studentm模型放到集合中

    　　model:studentm,       

　　    url:‘/info‘     });   // url 属性（或函数）以指定集合对应的服务器位置。集合内的模型使用 url 构造自身的 URLs

    var stulist = new list();

   function queryall(){   //查询

       stulist.fetch({success:function(m,r){     //fetch方法

           var str ="";

           m.each(function(i，n){

               str+="<tr><td>" + i.get("id")+

                       "</td><td>" +i.get("s_name")+

                       "</td><td>" +i.get("s_age")+

                       "</td><td><a href=‘javascript:del("+n+")‘>删除</a></td></tr>";

           });

           $(‘#main‘).html(str);

       }});    }

   queryall();

    $(‘#add‘).on(‘click‘,function(){

        var inpuobj = $(‘input[type=text]‘);

        var finp = inpuobj[0].value;

        var sinp = inpuobj[1].value;

        var temp = new studentm(); 

         temp.save({name:finp,age:sinp},{success:function(){    //save方法

            queryall();

        }});     });

   /**     *   删除     */

    function del(i){

       stulist.at(i).destroy({ //。。。。。。。。。destroy方法

           success:function(){

               queryall();

           }        });//  第一个发出请求，第二个消除集合中的自己（对象）;    }

</script>

backbone.初步了解


联系
我们