Question

我是js的新人。我有的index.html

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/common.css"/>
    </head>
    <body>
        <div id="page"></div>
        <script data-main="js/main" src="js/lib/require.js"></script>
    </body>
</html>

main.js

require.config({
    urlArgs: "_=" + (new Date()).getTime(),
    baseUrl: "js",
    paths: {
        jquery: "lib/jquery",
        underscore: "lib/underscore",
        backbone: "lib/backbone"
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
    }
});

define([
    'router'
], function(
    router
){
    Backbone.history.start();
});

router.js

    define([
        'backbone',
        'views/scoreboard'
    ], function(
         Backbone,
         scoreboard
    ){

        var Router = Backbone.Router.extend({
            routes: {
                'scoreboard': 'scoreboardAction',
                'game': 'gameAction',
                '*default': 'defaultActions'
            },
            defaultActions: function () {
                scoreboard.show();
                scoreboard.render();

            },
            scoreboardAction: function () {
                scoreboard.show();
                scoreboard.render();
                console.log(scoreboard.render());

            },
            gameAction: function () {
                // TODO
            }
        });

        return new Router();
    });

scoreboard.js

define([
    'backbone',
    'tmpl/scoreboard'
], function(
    Backbone,
    tmpl
){

    var View = Backbone.View.extend({

        template: tmpl,
        initialize: function () {
            //console.log("Woohoho");
            //this.listenTo(this.model, "change", this.render);
        },
        render: function () {
            //console.log(this.template());
            //this.$el.html(this.template(this.model.toJSON()));
            this.template();
            this.$el.html(this.template());
        },
        show: function () {
            //console.log("show");
            this.$el.html(this.template());

        },
        hide: function () {
            alert("Hide");
            // TODO
        }

    });

    return new View();
});

tmpl / scoreboard.js是从模板生成的，如果我console.log(this.template());我会看到有效的HTML代码。但在浏览器中，我看到了白色屏幕。我如何显示我的模板？

Answer 1

将el元素添加到您的视图中，如下所示：

var View = Backbone.View.extend({
    el: '#page',
    ....

骨干并需要js

1 个答案: