1.x tutorial search index js

search モジュール

概要

では、indexモジュールで定義した#contentエレメント以下に、検索(search)、検索結果(result)の２つのビューを作成して画面に表示します。

searchモジュールのサブモジュール構成

$ tree s/search/
s/search/
├── hbs
│   ├── result.hbs
│   └── search.hbs
├── i18n
│   ├── en.js
│   └── ja.js
├── index.js
├── model
│   └── search.js
├── styl
│   └── index.styl
└── view
    ├── result.js
    └── search.js

5 directories, 13 files

ファイル別 機能説明

index.js (Controller)

searchモジュールのControllerになります。

====

/**
 * @name index.js<search>
 * @author <author>
 * @overview controller of search module
 */

define(function(require, exports, module) {
    'use strict';

    var beez = require("beez");
    var logger = beez.getLogger('search.index');

    var mv = beez.manager.view;
    var mm = beez.manager.model;

    /**
     * Search Controller class
     *
     * @namespace search
     * @class
     * @name SearchController
     * @extends {beez.Controller}
     * @see beez.Controller
     */
    var SearchController = beez.Controller.extend(
        'search.SearchController',
        {
            css: [
                '/search/styl/index.css'
            ],

            /**
             * Define i18n
             *
             * @memberof SearchController
             * @name i18n
             * @override beez.Controller.i18n
             * @protected
             */
            i18n: function i18n() {
                return {
                    en: require('search/i18n/en'),
                    ja: require('search/i18n/ja')
                };
            },

            /**
             * call initialize method
             *
             * @memberof SearchController
             * @name initialize
             * @override beez.Controller.initialize
             */
            initialize: function initialize() {
                var SearchCollection = require('search/model/search').SearchCollection;
                var searchCollection = mm.create('/@', SearchCollection);

                var SearchView = require('search/view/search');
                mv.create('/@/content', SearchView, {
                    collection : searchCollection
                });

                var ResultView = require('search/view/result');
                mv.create('/@/content/search', ResultView, {
                    collection : searchCollection
                });

            },

            searchIndex: function searchIndex(tab) {
                mv.get('/@/content/search').async().show().end();
            }

            //

        })
    ;

    return SearchController;
});

i18n

Beezではデフォルトで国際化に簡単に対応可能になっていますが、その設定になります。

setup()関数, UserAgentで利用言語を決定します。詳しくはi18nを参照ください。

チュートリアルでは、英語(en), 日本語(ja)に対応しています。ブラウザの言語設定を変更して確認してみてください。

====

search/en.js

/**
 * @name en.js<core/i18n>
 * @author <author>
 * @overview i18n.en of core module
 */
define(function(require, exports, module){
    return {
        'search.label': 'Search github repositories',
        'search': 'Search',
        'search.text': 'Enter search word'
    };
});

search/ja.js

/**
 * @name ja.js<core/i18n>
 * @author <author>
 * @overview i18n.ja of core module
 */
define(function(require, exports, module){
    return {
        'search.label': 'GitHubリポジトリ検索',
        'search': '検索',
        'search.text': '検索ワードを入力してください'
    };
});

Router

searchモジュールのRouterもindexモジュールと同様に、設定ファイルで定義されています

searchモジュールの呼び出しパターン

• index/index.jsからの呼び出し

beez.manager.r.navigate('search', true)

• URLから直接実行

http://0.0.0.0:1109/m/tutorial1/s/index/local.develop.html?#search

conf/local/develop.json

{
    "develop": { // enviroment name
        ....
        // Setting require.js
        "requirejs": {
            ....
            "config": {
                // configuration information used by beez
                "beez.core": {
                    ....
                    // backbone#router
                    "router": {
                        "*default": {
                            ....
                        },
                        "search": {
                            "route": "search",
                            "name": "searchIndex",
                            "require": "search/index",
                            "xpath": "/@/search"
                        }
                    }
                }
            }
        }
    }
}

model/search.js(Model)

Controllerで定義したCollection,Modelが定義されています

var SearchCollection = require('search/model/search').SearchCollection;
var searchCollection = mm.create('/@', SearchCollection);

基本的に、Backbone.js#Collection, Backbone.js#Model と同等の機能を持っています。

====

/**
 * @name search.js<search/model>
 * @author <author>
 * @overview model of search
 */

define(function (require, exports, module){
    'use strict';

    var beez = require('beez');
    var logger = beez.getLogger('model.search');

    var mv = beez.manager.v;
    var mm = beez.manager.m;

    var SearchModel = beez.Model.extend(
        'search.model.SearchModel',
        {
            midx: 'search',
            defaults: {}

            //

        }
    );
    var SearchCollection = beez.Collection.extend(
        'search.modelSearchCollection',
        {
            midx  : 'search',
            model : SearchModel,
            url  : function url() {
                return this.urlRoot + '/search/repositories';
            },
            parse : function parse (resp, options) {
                this.total = resp.total_count;
                return resp.items;
            }
            //
        }
    );

    return {
        SearchModel: SearchModel,
        SearchCollection: SearchCollection
    };

});

コード説明

url

サーバーへのHTTPリクエストのURLです。 Backboneの機能として提供されていますが、beezが自動的に設定ファイルのbeez.config.url.apiを、urlRootに自動で設定していますので、 suffixのみ記述すればいいようになっています。

parse

Backboneの機能です。HTTP ResponseデータをカスタムしてModelに設定しています。

詳しくは、Backboneのドキュメントを参照ください。

view/hbs/styl

indexモジュールで解説した内容とBackbone.js, Handlebars, Stylusの機能で実装されていますので、割愛します。