0

私は Backbone.js と Underscore.js (および JQuery と require.js などの通常の疑わしいもの) を使用して Web アプリケーションを作成しています。Web アプリケーションのロジックの一部には、HTML ビュー/テンプレートの読み込みが含まれます。以下のようなメカニズム (ここや他の場所で見つかったスクリプトに基づく) をコーディングしました。

var some_View = Backbone.View.extend(
    {
        initialize:function(){this.render();},
        render:function(){
                var renderedElement = this.$el.html(something.render("someView"));
            }

    }
)

var someView=new some_View( {el:$("#some_DIV_container")} );

something.render("someView")は、実際にレンダリングを行うメソッドです。このメソッドは AJAX 呼び出しを実行し、基本的に、読み込まれた結果を渡された DIV (some_DIV_container) に挿入します。

// code in the "something" object
render:function(tmpl_name,tmpl_data){
    console.log("loading view..." + tmpl_name);
    // this method renders a view. from the /views folder.
    if ( !this.render.tmpl_cache ) { 
        this.render.tmpl_cache = {};
    }
    if ( ! this.render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = 'views';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType:'html',
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });
    this.render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }
    console.log(" this.render.tmpl_cache[tmpl_name](tmpl_data) = "+ this.render.tmpl_cache[tmpl_name](tmpl_data));      
    return this.render.tmpl_cache[tmpl_name](tmpl_data);
}

新しいビューを作成するたびに、Backbone.View を拡張する変数を作成し、Backbone.View を拡張する別の変数を作成する必要があることを除けば、このコードは魅力的に機能します。つまり、ロードする HTML ファイルの名前である「someView」は静的です。動的にロードする HTML テンプレートの名前を渡したいと思います。some_View の記述方法でパラメーターを渡す方法がわかりません。

だと思います（そう見える）

  • Backbone.View.Extend() は関数オブジェクトを返します
  • elを使用して、HTML テンプレート/ビュー コードを挿入するコンテナーへの jQuery 参照を渡します。
  • 「some_View」がレンダリングされると、something.render が呼び出されます。これは、HTML をロードして this.$el の html() メソッドに返します。これは、基本的に、コンテンツを挿入する解決済みの div であると考えています。コンテンツが挿入されます。

つまり、ビューを作成するたびに backbone.view.extend を拡張してインスタンス化する変数の作成を繰り返す必要がないように、このコードを最適化したいのです。

何かご意見は？コードパズルです！

ありがとう

4

2 に答える 2

1

では、すべてのビューに同じビューコンストラクターを再利用したいですか？そのように見えるのは、変更されない、またはユーザー入力がない非常に単純なビューでのみ機能します。ただし、ビューを作成するときに使用するテンプレートを渡すだけで、このようなことができる場合があります。

var some_View = Backbone.View.extend(
    {
        initialize:function(options){
            this.templateName = options.templateName;
            this.render();
        },
        render:function(){
                var renderedElement = this.$el.html(something.render(this.templateName));
            }

    }
)

var someView=new some_View( {el:$("#some_DIV_container"), templateName: 'someTemplate'} );
于 2013-02-07T18:44:49.070 に答える
0

これが私が使用した関連コードです。(私も Base.js を使ってクラスを作りました)

// this method is part of a javascript class called qq

var qq = Base.extend({

///other stuff///

render:function(tmpl_name,tmpl_data){
    console.log(" render(): rendering view " + tmpl_name + ".html");

    if ( !this.render.tmpl_cache ) { 
        this.render.tmpl_cache = {};
    }
    if ( ! this.render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = 'views'; // your directory
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';
        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType:'html',
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });
    this.render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return this.render.tmpl_cache[tmpl_name](tmpl_data);
}

});


var q=new qq(); // where the method above comes from
// define some initial parameters

q.viewParams={
    initialize:function(options){console.log("viewName = "+this.options.viewName);this.renderIt();},
    renderIt:function(){
        var renderedEl= this.$el.html(q.render(this.options.viewName));
        } 
    };

// load the recipient view
var x = Backbone.View.extend( q.viewParams );
q.recipientView = new x( {el:q.recipientBoxEl,viewName:"someView"}  );
于 2013-02-14T20:26:08.017 に答える