Javascript html页面的呈现不起作用

我正在使用Backbonejs框架。在这个框架下，我创建了一个app.js，它使用Backbonejs、requirejs、下划线和text.js 我想将一个html页面加载到一个div上。控制台显示html页面已加载，但我无法在屏幕上看到该特定页面

下面是app.js

定义（功能（需要）{
//“严格使用”；
var$=require（'jquery'），
下划线=require（'assets/js/下划线'），
主干=需要（'assets/js/Backbone'），
tpl=require（'text！Views/home.html'），
模板=uu.template（tpl）；
return.View.extend({
渲染：函数（）{
el:'旗帜'，
这个.$el.html（template（））；
归还这个；
}
});
});

我想将home.html加载到主屏幕（index.html）。我在index.html中调用了这个app.js。控制台显示以下XHR已完成加载：GET“file:///D:/Project1/Views/home.html"

---

但是我的index.html页面没有显示这个home.html，代码有很多问题

主干视图需要实例化

el需要在渲染函数外部定义

需要手动或从初始化函数（在创建视图实例时调用）中调用渲染函数

整体结构写得不好，但我没有纠正这一点，因为它超出了这个问题的范围

检查这把小提琴：

---

查看此链接以获取参考：

您可以参考本文-模板化最佳实践的第二个技巧-。如果您希望将模板保存在不同的文件中，那么使用依赖关系管理实用程序是一个不错的选择。感谢您的回复。代码是有效的。我还有一个疑问。是否有可能将tpl作为URL传递，因为我需要呈现一个html页面。在这里，您直接在tpl变量中编写html代码，而我需要传递url。是的，您可以。我只是在你给出答案之前发表评论，点击那个链接。请检查第二个提示-第二点。

var tpl = "<div>hello world</div>";
var template = _.template(tpl);
(function(){
    var View = Backbone.View.extend({
        el: '#banner',
        initialize: function(){
            this.render();
        },
        render: function () {
            this.$el.html(template());
        }
    });
    var v = new View();
})();

<!-- pod.html -->
<h2><%= title %></h2>
<p><%= body %></p>

// view.js
define(["text!templates/pod.html"], function(pod) {
  var View = Backbone.View.extend({
    template: _.template(pod)
  });
});