html页面的渲染不起作用

Question

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

下面是 app.js

define(function (require) {

    // "use strict";

    var $ = require('jquery'),
        underscore = require('assets/js/underscore'),
        Backbone = require('assets/js/backbone'),
        tpl = require('text!Views/home.html'),

        template = _.template(tpl);

    return Backbone.View.extend({
        render: function () {
            el: '#banner',
            this.$el.html(template());
            return this;    
        }
    });
});

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

Answer 1

代码有很多问题。

1. Backbone View 需要实例化
2. el 需要在渲染函数之外定义
3. 需要手动或从初始化函数（在创建视图实例时调用）中调用渲染函数
4. 整体结构写得不好，但我没有更正它，因为它超出了这个问题的范围。

检查这个小提琴：http://jsfiddle.net/rahulsv/c4dveax9/

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();
})();

希望对你有帮助。

更新：

要使用 requireJs 从文件中访问模板（因为您正在使用它），您可以执行以下操作：

模板文件：

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

从你的 JS 访问模板：

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

查看此链接以供参考：http://kilon.org/blog/2012/11/3-tips-for-writing-better-backbone-views/