如何重新重寫這個骨幹相關的腳本傳遞模板/視圖的名稱來加載

Question

我使用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的變量。換句話說，「someView」是要加載的HTML文件的名稱，它是靜態的。我想通過HTML模板的名稱來動態加載。我只是無法看到我如何通過some_View寫入的方式傳遞參數。

我認爲，（出現的話）

• Backbone.View.Extend（）返回一些函數對象
• 我們使用EL到一個jQuery引用傳遞的地方，我們要插入容器HTML模板/視圖代碼到
• 當「some_View」被渲染時，我們調用something.render，它加載並返回HTML到這個.html（）方法中。$ el，我相信它基本上是我想要的解析div將內容插入到。內容被插入。

所以簡而言之，我想優化這段代碼，這樣我就不必重複創建變量，在每次創建視圖時都會擴展backbone.view.extend和實例化它。

有什麼想法？這是一個代碼難題！

謝謝

Answer 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'}); 

Answer 2

這是我使用的相關代碼。 （我也用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"} );