Question

了解Backbone.js如何与服务器通信后，我现在遇到Backbone.View.render（）问题。

我的javascript代码是这样的：

var myObject = Backbone.Model.extend( {
    fetch: function (options) {
      // some modifications
    }
});

var Templates = myObject.extend({
    urlRoot: 'templates/load.php',
    initialize: function() {
        this.fetch();
    }
});

var appTemplates = new Templates();

load.php加载所有模板文件并将它们转换为一个JSON对象，然后返回给客户端。所以appTemplates将为我的所有Mustache.js模板做好准备。

为了测试，我创建了一个'主'模板和一个视图：

var Output = Backbone.View.extend({

    template: function() {

        return appTemplates.get('main');
    },

    render: function() {

        var rendered = Mustache.to_html(this.template(), this.model.toJSON() );

        console.log( rendered ); // has exactly the data I want.

        this.$el.html( rendered ); // <body> ... </body> remains empty
        $('body').html( rendered ); // works fine.
        return this;
    },
});

var skeleton = new Output({ el: 'body', model: SomeModelData });

skeleton.listenTo(appTemplates, 'change', skeleton.render);

那么为什么this.$el.html()不起作用？我想，this.$el只是$(this.el)的快捷方式，但this.el未定义，关于console.log的输出（我没有定义它？我以为我做了......）虽然this.model工作得很好。

最初的HTML不是很引人注目：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="./javascript/jquery-2.1.4.js" ></script>
    <script src="./javascript/underscore.js"></script>
    <script src="./javascript/backbone.js" ></script>
    <script src="./javascript/mustache.min.js"></script>
    <script src="./javascript/js.js"></script>
    <title></title>
</head>
<body>
</body>
</html>

View构造函数中的'main'字符串还有另一个问题。如果我将'main'作为值发送给构造函数（{ tpl: 'main', ... }）tpl仍未定义。

我在这里做错了什么？

编辑：问题已解决

看起来，问题是我的js文件包含在html的<head>...</head>中，但它需要包含在<body>...</body>中才能按预期工作。如果有人知道这个的原因，我很乐意听到它。

Backbone.View。$ el.html（）对DOM没有影响

编辑：问题已解决

0 个答案: