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

backbone.初步了解

 

  当我们开发含有大量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.初步了解