Question

我只是得到一个空白的屏幕。我做错了什么？

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="underscore/underscore-min.js"></script>
    <script src="backbone/backbone-min.js"></script>
    <script type="text/template" id="view-navigation-bar-template">
        <ul>
            <li><input type="button" value="Day" /></li>
            <li ><input type="button" value="Week" /></li>
            <li><input type="button" value="Month" /></li>
        </ul>
    </script>
    <script src="common.js"></script>
</head>

<body>
    <div id="view-navigation-bar" class="button-list">
        <!-- Insert view-navigation-bar_template here -->
    </div>
</body>
</html>

common.js

ViewNavigationBarView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template( $("#view-navigation-bar-template").html(), {} );
        this.$el.html( template );

        return this;
    }
});

viewNavigationBarView = new ViewNavigationBarView({ el: $("#view-navigation-bar") });

Answer 1

OP的问题的答案依赖于没有文件。听众。骨干视图本身不会等待DOM可用。因此立即插入没有做任何事情。

快速修复：将其打包在$(document).ready(function() { });

中

我的backbone.js视图不呈现任何内容

1 个答案: