如何使用backbonejs和requirejs動態加載視圖和模板

我正在創建一個使用backbonejs的表單生成器應用程序，並想知道如何動態加載視圖我有一個下拉列表，我可以選擇應添加哪種類型的元素，例如我選擇輸入字段。我有一些默認值與他們在formtemplate中的每個元素一起使用，並基於選擇哪個字段來加載不同的html模板。如何使用backbonejs和requirejs動態加載視圖和模板

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'modal', 
// Pull in the Collection module from above 
    'collections/builder', 
    'text!templates/forms/builder.html', 
    'text!templates/forms/formsTemplate.html', 
    'text!templates/forms/textBox.html', 
    'models/builder' 

], function ($, _, Backbone, popupModal, attributesCollection, builderTemplate, formsTemplate, inputTemplate, attributesModel) { 
    var attributesBuilderView = Backbone.View.extend({ 
     el: $("#page"), 
     initialize: function() { 

     }, 
     render: function() { 
      this.loadTemplate(); 
     }, 
     loadTemplate: function() { 
      var that = this; 
      this.el.html(builderTemplate); 
     }, 
     // Listen to events on the current el 
     events: { 
      "change #attributeType": "loadAttributeTemplate" 
     }, 
     loadAttributeTemplate: function() { 
      if (($("#attributeType").val()) != '0') { 
       $("#attributesArea").append(_.template(formsTemplate, { elementType:    $("#attributeType :selected").text(), _: _ })); 
       var template = $("#attributeType").val() + 'Template'; 
       $(".formElement").html(_.template(template)); 
      } 
     } 
    }); 
    return new attributesBuilderView; 
});

這裏的時候，我運行這段代碼我得到inputTemplate文字的HTML，而不是模板，如果我把$ HTML（_模板（inputTemplate）。）（「formElement。」）。它工作正常。我只需要知道如何提前加載這些動態

感謝

來源

2012-06-12 Kishore

你可以在任何地方放置需要調用，如果你只希望做有條件加載：

編輯（添加功能PARAMS到要求聲明）

loadAttributeTemplate: function() { 
    if (($("#attributeType").val()) != '0') { 
     require(['text!templates/forms/builder.html', 
      'text!templates/forms/formsTemplate.html', 
      'text!templates/forms/textBox.html'], 
      _.bind(function(builder, formsTemplate, textBox) { 
       $("#attributesArea").append(_.template(formsTemplate, { elementType:    $("#attributeType :selected").text(), _: _ })); 
       var template = $("#attributeType").val() + 'Template'; 
       $(".formElement").html(_.template(template)); 
      },this); 
     ); 
    } 
}

請注意，我也做了_.bind（...，this）來維護執行範圍。我知道這不一定需要，但它確實派上用場。

我在我的應用程序的幾個地方執行此操作;特別是當我只想在需要時加載模塊時。

來源

2012-06-12 16:57:46

感謝布倫丹，但我仍然有同樣的問題，如果我從下拉列表中選擇的東西，我只看到文本inputTemplate而不是實際的模板被加載。我如何加載模板？像說我從下拉列表中選擇輸入字段我想加載帶有文本框的模板，但現在我只看到文本 – Kishore

糟糕...我忘記了函數輸入...我已經在代碼示例中更正了這一點。另外，在你的回覆中你提到了文本框，但是在你的代碼中沒有任何地方能看到你編寫模板 - 只有formsTemplate。 –

真棒我不得不修改它有點爲我的需要，但它的作品謝謝！ – Kishore

如何使用backbonejs和requirejs動態加載視圖和模板

回答

相關問題