backbonejs を使用してフォーム ビルダー アプリケーションを作成しています。ビューを動的にロードする方法を知りたいのですが、入力フィールドを選択するなど、追加する要素のタイプを選択できるドロップダウンがあります。フォームテンプレートにあるすべての要素に対応するいくつかのデフォルト値があり、選択されたフィールドに基づいて、さまざまな HTML テンプレートをロードしたいと考えています。
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;
});
ここで、このコードを実行すると、 $(".formElement").html(_.template(inputTemplate)); を配置すると、テンプレートではなく html に inputTemplate テキストが表示されます。それは正常に動作します。これらを動的にロードする方法を知る必要があるだけです
前もって感謝します