Question

我需要渲染我的模板templates/page.html：

<section class="section">
    <div class="container">
        <h1 class="title"><%= title %></h1>
        <div><%= content %></div>
        <div><%= pages %></div>
    </div>
</section>

进入div元素，page-content ID：

// Underscore mixins
_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

// Models
var PageState = Backbone.Model.extend({
    defaults: {
        title: "",
        subtitle: "",
        content: "",
        pages: "",
        state: "games"
    }
});

var pageState = new PageState();
// Routers
var PageRouter = Backbone.Router.extend({
    routes: {
        "": "games",
        "!/": "games",
        "!/games": "games",
        "!/users": "users",
        "!/add-user": "add_user"
    },

    games: function () {
        select_item($("#games"));
        console.log("games");
        pageState.set({ state: "games" });
    },

    users: function () {
        select_item($("#users"));
        console.log("users");
        pageState.set({ state: "users" });
    },

    add_user: function () {
        console.log("add_user");
    }
});

var pageRouter = new PageRouter();
// Views
var Page = Backbone.View.extend({
    templates: {
        "page": _.templateFromUrl("/templates/page.html")
    },
    initialize: function () {
        this.render();
    },
    render: function () {
        var template = this.templates["page"](this.model.toJSON());
        this.$el.html(template);
        return this;
    }
});

$(function () {
    var page = new Page({
        el: '#page-content',
        model: pageState
    });
});
// Run backbone.js
Backbone.history.start();
// Close mobile & tablet menu on item click
$('.navbar-item').each(function(e) {
    $(this).click(function() {

        if($('#navbar-burger-id').hasClass('is-active')) {
            $('#navbar-burger-id').removeClass('is-active');
            $('#navbar-menu-id').removeClass('is-active');
        }
    });
});

// Open or Close mobile & tablet menu
$('#navbar-burger-id').click(function () {

    if($('#navbar-burger-id').hasClass('is-active')) {
        $('#navbar-burger-id').removeClass('is-active');
        $('#navbar-menu-id').removeClass('is-active');
    } else {
        $('#navbar-burger-id').addClass('is-active');
        $('#navbar-menu-id').addClass('is-active');
    }
});
// Highlights an item in the main menu
function select_item(sender) {
     $("a.v-menu-item").removeClass("is-active");
     sender.addClass("is-active");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<body>
	<section class="hero is-primary is-medium">
        <div class="hero-head">
            <nav id="navMenu" class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item is-size-2">Virto</a>
                        <span id="navbar-burger-id" class="navbar-burger burger" data-target="navbar-menu-id">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </div>
                    <div id="navbar-menu-id" class="navbar-menu">
                        <div class="navbar-end">
                            <a id="games" href="#!/games" class="navbar-item v-menu-item is-active">Games</a>
                            <a id="users" href="#!/users" class="navbar-item v-menu-item">Users</a>
                            <span class="navbar-item">
                                <a href="#!/add-user" class="button is-primary is-inverted">
                                    <span class="icon">
                                        <i class="fas fa-user-circle"></i>
                                    </span>
                                    <span>Add user</span>
                                </a>
                            </span>
                        <div>
                    </div>
                </div>
            </nav>
        </div>
    </section>
    <div id="page-content"></div>
</body>

但是我的内容没有加载...我是骨干的noobie.js仍然有人可以解释我做错了什么以及如何解决？
的 ADDED
我在调试器中检查了我的脚本。它加载了一个模板并在div函数中找到了我的render()，但在我的div仍为空之后，我在浏览器中看不到任何结果。

Answer 1

我使用您的代码创建了一个plunker，它适用于我：link

我想你只是忘了初始化你的模型：

// Models
var PageState = Backbone.Model.extend({
  defaults: {
    title: "Title - 1",
    subtitle: "Subtitle - 1",
    content: "Content",
    pages: "1",
    state: "games"
  }
});

无法将模板渲染为div

1 个答案: