backbone.js初探侦

30225 ワード

backbone

BackBoneはJavaScript frame ewarks for creating MVC-like web appration sで、最近流行しているのは単一ページweb appicationを作るためのツールで、Restful JSONフレームワークを遵守して使用しました.
Backboneは、モデルModels、集合Collection、ビュービュービュービュービューを提供することにより、Webアプリケーションの階層構造を付与する.階層構造は以下のように実現される.

モデルModelバインディングキーデータとカスタムイベントは、アプリケーション内のすべてのデータを表しています.models中のデータは、サービス端末に作成、検証、廃棄、保存できます.modelsの値が変更されると、自動的に「change」イベントをトリガします.models数データを示すviewは、このイベントを聞き出して再レンダリングします.

セットのColectionは、モデルの順序または無秩序の集合であり、豊富なエニュメレート・APIを有する.私たちが普段接しているJAVAの集合類と似ています.元素を増やしたり、元素を削除したり、長さを取ったり、並べ替えたり、比較したりする一連のツール方法があります.つまり、modelsを保存する集合類です.

ビュービュービューの宣言イベントの傍受関数;Viewではdom elとクライアントイベントを結びつけることができます.ページの中のhtmlはviewのrender方法によってレンダリングされたもので、新しいviewを作る時にmodelを一つのmodelに送ることによってデータとして、例えば:

var view = new EmployeeView({model:employee});

つまりmodelとは、このようにviewと関連付けられている

です.
モデル、セット、ビューをサービス端末のRESTful JSONインターフェースに接続します.BackboneはUnderscore.js,DOM操作とAJAX要求に依存しなければなりません.第三者のjQuery/Zepto/enderの一つに依存してもいいです.Backbone.set DomLibrary(lib)によって他の第三者ライブラリを設置してもいいです.
特徴

modelsまたはviewの構文を作成します.extensはクラス継承

に相当します.

modelsの作成、廃棄、検査などの一連の変更は、対応するイベント

をトリガします.
例
需要:backbone.jsとjqueryで編集可能な従業員情報表を実現します.
機能:1、従業員の情報を入力します.2、従業員情報を削除する.3、テーブルをダブルクリックして、従業員の情報を修正します.4、従業員の情報を有効性チェックすることができます.5、社員の情報を恒久化することができます.
デザイン:
Employee類(Backbone.Modelから継承)で社員情報を表し、ID、名前、性別、年齢、職位フィールドを含みます.

    window.Employee = Backbone.Model.extend({

        //      

        validate:function(attrs){

            for(var key in attrs){

                if(attrs[key] == ''){

                    return key + "    ";

                }

                if(key == 'age' && isNaN(attrs.age)){

                    return "       ";

                }

            }

        }

    });

Employeeクラスを宣言すると、Employeeのオブジェクトの例が追加されます.
var employee = new Employee();
EmployeeクラスではID、名前などのビジネスフィールドを宣言する必要はありません.これらの情報をemployeeに設定したい場合は、呼び出しのみが必要です.
employee.set(''id':1、'name':'Jason');
もちろん、employeeの情報をチェックする必要があるなら、Employeeクラスにvalidate方法を配置する必要があります.この方法のパラメータatrsはsetに入るjsonデータです.このように、employeeの中のデータが変わるたびに、このvalidateメソッドを呼び出します.
Modelクラスの定義ができたら、集合類の定義が始まります.集合類では、中の各Modelを増加したり、削除したりする一連の操作ができます.また、fetchメソッドを呼び出してserver端から集合の初期値を取得することもできます.

    window.EmployeeList = Backbone.Collection.extend({

        model : Employee,

        //          

        localStorage: new Store("employees"),

        

    });

    window.Employees = new EmployeeList();

local Strage属性を設定すると、Employes内のデータは自動的に同期してローカルデータベースに保存されます.Employes.fetch()を呼び出すたびに、またlocal Strageからデータを復元します.
View類は主にすべてとインターフェース関連の仕事を担当しています.例えば、htmlテンプレート、インターフェース要素を結びつけるイベント、初期のレンダリング、モデル値が変わった後の再レンダリングとインターフェース要素の破壊などです.

window.EmployeeView = Backbone.View.extend({

        tagName : 'tr',

        template : _.template($('#item-template').html()),

        events : {

            "dblclick td" : "edit",

            "blur input,select" : "close",

            "click .del" : "clear",

        },

        initialize : function(){

            //            

            this.model.bind('change', this.render, this);

            //             UI

            this.model.bind('destroy', this.remove, this);

        },

        setText : function(){

            var model = this.model;

            this.input = $(this.el).find('input,select'); 

            this.input.each(function(){

                var input = $(this);

                input.val(model.get(input.attr("name")));

            });

        },

        close: function(e) {

            var input = $(e.currentTarget);

            var obj = {};

            obj[input.attr('name')] = input.val();

            this.model.save(obj);

            $(e.currentTarget).parent().parent().removeClass("editing");

        },

        edit : function(e){

            //  td  editing  

            $(e.currentTarget).addClass('editing').find('input,select').focus();

        },

        render: function() {

            $(this.el).html(this.template(this.model.toJSON()));

            //                 

            this.setText();

            return this;

        },

        remove: function() {

            $(this.el).remove();

        },

        clear: function() {

          this.model.destroy();

        }

});

このクラスのコードは多いですが、主にインターフェースのレンダリングと関係があります.一つのEmployeeViewオブジェクトはテーブルの中の一つのtr要素に対応します.new EmployeeViewオブジェクトがあるたびに、initializeメソッドを起動します.この方法でバインディングされたイベントはtr要素に対応するmodel値が変化または削除されるたびにインターフェースに同期されることを保証します.つまり、インタフェースを操作するたびにデータを修正した後、現在の変更をviewバインディングされたmodelオブジェクトに保存してから、model内のイベント機構が自動的に「change」イベントをトリガして、インターフェースを修正します.
templateで使う方法(u.template('('擝莑item-template')は前述のundersscore.jsでツールを提供しています.インタフェースのHTMLテンプレートとJSONでダイナミックなHTMLを生成できます.つまりJSONの中の値をHTMLテンプレートに対応するプレースホルダの中に埋め込みます.

        <script type="text/template" id="item-template">

            <td><%= eid %></td>

            <td class="username">

                <div class="display"><%= username %></div>

                <div class="edit"><input class="username" name="username"></input></div>

            </td>

            <td class="sex">

                <div class="display"><%= sex=="1" ? " ":" " %></div>

                <div class="edit">

                <select name="sex" class="sex" style="width:45px">

                    <option value="0"> </option><option value="1"> </option>

                </select>

                </div>

            </td>

            <td class="age">

                <div class="display"><%= age %></div>

                <div class="edit">

                    <input class="age" name="age"></input>

                </div>

            </td>

            <td class="position">

                <div class="display"><%= position %></div>

                <div class="edit">

                    <input class="position" name="position"></input>

                </div>

            </td>

            <td>

                <a href="#" class="del">  </a>

            </td>

        </script>

set Textメソッドは主にmodel内のデータを各tr内の隠し入力領域に設定することに責任を負います.
close法はinputとselect要素のblurイベントに結合されている.ユーザーがセルのデータを変更すると、画面の他の場所にマウスをクリックし、入力ボックスが自動的に非表示になり、修正したデータを表の上に表示します.closeメソッドは、まず現在編集されている要素から最新の値を取得し、オブジェクトにパッケージ化し、モデルのsave方法を呼び出した後、まずmodelのvalidate方法を実行し、検証が通ればローカルに保存し、「change」イベントをトリガします.
最後にもう一つのメインインターフェースViewが必要です.このViewは主にインターフェースの入力フォームの「追加」ボタンイベントをバインドしています.Employeesの関連イベントとページ初期化時にローカルメモリからデータを回復します.

window.AppView = Backbone.View.extend({

        el : $("#app"),

        events : {

            "click .#add-btn" : "createOnEnter"

        },

        //   collection     

        initialize: function() {

            Employees.bind('add', this.addOne, this);

            //   fetch     reset

            Employees.bind('reset', this.addAll, this);

            Employees.fetch();

        },

        createOnEnter : function(e) {

            var employee = new Employee();

            var attr = {};

            $('#emp-form input,#emp-form select').each(function(){

                var input = $(this);

                attr[input.attr('name')] = input.val();

            });

            employee.bind('error',function(model,error){

                alert(error);

            });

            // set        model validate      ，        false

            if(employee.set(attr)){

                Employees.create(employee);

            }

        },

        addOne : function(employee){

            employee.set({"eid":employee.get("eid")||Employees.length});

            employee.bind('error',function(model,error){

                alert(error);

            });

            var view = new EmployeeView({model:employee});

            $(".emp-table tbody").append(view.render().el);

        },

        addAll : function(){

            Employees.each(this.addOne);

        }

});

initializeメソッドには、Employesのaddとresetイベントが結合されています.つまり、Employesにmodelを追加するたびに、ApViewのaddOne方法を呼び出します.この方法は主にmodelのerrorイベントとEmployeeViewを生成したhtmlをインターフェースに挿入する適当な場所を結合しました.
オーケー、すべての準備が整っています.起動しないだけで、アプリケーション全体の初期化方法はAppViewのinitialize方法です.ですから、AppViewを新たに作成してもいいです.
window.アプリ = new AppView();
全体例のJSコードは少ないですが、例としてはローカルストレージを使用していますので、IEで例を実行しないでください.
転載元:http://weakfi.iteye.com/blog/1391990

javascriptアプリケーション:Iframe適応コンテンツの高さ