Skip to content

1.x View

Jump to bottom Edit New page
HIRAKI Satoru edited this page Mar 18, 2014 · 5 revisions

Summary

beez.ViewはMVCにおけるViewを担当します。

Backbone.jsのViewを基に作られているので、基本的な機能については Backbone.View を参照してください。

beez.View は、Backbone.View の薄いラッパーです。Backbone.View のすべての機能は、beez.View で利用可能です。

Backbone.Viewの機能に加え、beez.manager.viewと連携することで、

  • 自動 Dispose
  • 表示の切り替え

等の機能を利用することができます。

beez.View

定義

新しく MyView を定義する際は、beez.View を継承します。

var MyView = beez.View.extend(
    'MyView',
    {
        vidx    : 'myView',
        tagName : 'div',
        events  : { },
        initialize : function initialize() { },
        beforeOnce : function beforeOnce() { },
        before : function before() { },
        render : function render() { },
        after : function after() { },
        afterOnce : function afterOnce() { },
        conceal : function conceal() { },
        remove : function remove() { },
        dispose : function dispose() { }
    }
);

vidx の値は、beez.manager.view のView管理上の index として使用されます。

tagName は Backbone.View の機能のひとつで、MyView の持つ DOM Element のラッパー要素を示しています。 こちらの詳細は Backbone.View - el を参照してください。

生成

基本的に、View インスタンス生成は beez.manager.view を利用して行います。

beez.manager.view を通した View のインスタンス生成例

beez.manager.view.create('/@', MyView);

'/@' 部分は Manager が管理する JSONPath で MyView を追加したい親のPathを指定します。

createしたViewのpathは、prefix + '/' + View#vidx となり、今回の場合、MyView は beez.manager.view で '/@/myView' というPathで管理されます。

取得

View のインスタンス取得は beez.manager.view を利用して行います。

Manager で管理されている View を取得する例

var myView = beez.manager.view.get('/@/myView');

Tree 構造

MyViewの子としてMyChildViewを生成するには、以下の様にします。

var MyChildView = beez.View.extend(
  'MyChildView',
  {
    vidx    : 'myChildView',
    tagName : 'div',
    events  : { },
    initialize : function initialize() { },
    beforeOnce : function beforeOnce() { },
    before : function before() { },
    render : function render() { },
    after : function after() { },
    afterOnce : function afterOnce() { },
    conceal : function conceal() { },
    remove : function remove() { },
    dispose : function dispose() { }
  }
);

beez.manager.view.create('/@/myView', MyChildView);

これで、beez.manager.view上に「'/@/myView/myChildView'」という階層構造が作られたことになります。

rootとなるviewの設定

先の例では特に言及せずに「'/@'」というprefixを指定しましたが、この「'/@'」というのはbeez.manager.view内のrootとなる特別なView(※以後、rootとなるViewをRootViewとする)を示します。 RootViewはbeez.managar.viewが管理するView群の最上位Viewを示し、他のViewと比較してshow/hideに影響されない等の違いがあります。 RootViewの定義方法自体は、上記のbeez.Viewを継承する方法と基本的には違いはありませんが、vidxには必ず「'@'」を用いてください。

var RootView = beez.View.extend(
    'RootView',
    {
        vidx    : '@',
        el      : '#w',
        events  : { },
        initialize : function initialize() { },
        beforeOnce : function beforeOnce() { },
        before : function before() { },
        render : function render() { },
        after : function after() { },
        afterOnce : function afterOnce() { },
        conceal : function conceal() { },
        remove : function remove() { },
        dispose : function dispose() { }
    }
);

elはBackbone.Viewの機能のひとつで、elプロパティで指定した要素(既に存在する要素)をViewのラッパー要素として使用します。こちらの詳細はBackbone.View - elを参照してください。

RootViewは基本的に不変なViewを示すため、通常はhtmlで定義されたDOM Elementのidを指定することになります。 この場合は既に 「id="w"」となっているDOM Elementが存在することを前提としたコードになっています。

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div id="w"></div>
  </body>
</html>

rootとなるViewとしてbeez.manager.viewの管理上に置くには、特殊なrootメソッドを使用します。

beez.manager.view.root(RootView);

これでRootViewがroot「'/@'」として、beez.manager.viewのView管理上に置かれたことになります。

DOMイベントのbind

Backbone.Viewの機能として、担当するDOM要素のイベントをハンドリングすることができます。 eventsプロパティに、

var MyView = beez.View.extend(
    'MyView',
    {
        vidx    : 'myView',
        tagName : 'div',
        events  : {
            'click .btn' : 'onClick'
        },
        initialize : function initialize() { },
        beforeOnce : function beforeOnce() { },
        before : function before() { },
        render : function render() {
            var str = '<ul>';
            str += '<li><a href="#" class="btn">button A</a></li>';
            str += '<li><a href="#" class="btn">button B</a></li>';
            str += '<li><a href="#" class="btn">button C</a></li>';
            str += '</ul>';
            this.$el.html(str);
        },
        after : function after() { },
        afterOnce : function afterOnce() { },
        onClick : function onClick(e) {
            e.preventDefault();
            e.stopPropagation();
            alert($(e.target).html());
        }
    }
);

の様に、「'eventname [selector]'」と「'methodname'」の対を記述することでDOMイベントをdelegateする仕組みです。 より詳しい情報は、Backbone.View - delegateEventを参照してください。

表示/非表示の切り替え

各Viewの表示/非表示を切り替えるには、async().show() / async().hide()メソッドを使用します。

var myView = beez.manager.view.get('/@/myView');

//表示
myView.async().show().end();

//非表示
myView.async().hide().end();

showメソッドが実行されると、Viewインスタンス内のbeforeOnce() → before() → render() → after() → afterOnce()が順に実行され、hideメソッドが実行されると、Viewインスタンス内のconceal() → remove()が順に実行されます。

var MyView = beez.View.extend(
    'MyView',
    {
        vidx    : 'myView',
        tagName : 'div',
        events  : { },
        initialize : function initialize() { }, //初期化時に実行される
        beforeOnce : function beforeOnce() { console.log('1'); }, //初回のみ、beforeが実行される直前に実行される
        before : function before() { console.log('2'); }, //renderが実行される直前に実行される
        render : function render() { console.log('3'); }, //レンダリング
        after : function after() { console.log('4'); }, //renderが実行された直後に実行される
        afterOnce : function afterOnce() { console.log('5'); } //初回のみ、afterが実行された直後に実行される,
        conceal : function conceal() { console.log('6'); }, // async().hide()が実行された直後に実行される
        remove : function remove() { console.log('7');}, // concealが実行された直後に実行される
        dispose : function dispose() { console.log('8');} // dispose viewのインスタンスを破棄する際に実行される
    }
);

フィルター機能

特定のViewの表示/非表示を切り替えたい場合、filterオプションを使用します。

関数の戻り値で指定した条件に一致するviewのみを対象に表示/非表示を切り替えます。

View.async().show({
    filter: function (view) {
        return view.vidx === 'hoge'
    }
});

カスタムイベント

Viewインスタンスの表示/非表示切り替えのタイミングでイベントが発火します。

  • beez:view:render → Viewが表示された後に発火するイベントです
  • beez:view:remove → Viewが非表示になった後に発火するイベントです
Add a custom footer
Add a custom sidebar

Clone this wiki locally