Question

我很困惑，可以使用一些帮助。

我在渲染功能中，我有以下三个调试行：

            console.debug(this.model);
            foo = this.model.toJSON();
            console.debug(foo);

第一行的输出是一个模型实例，其中包含从服务器获取的数据，并且attributes属性填充了我期望的内容。

但是，第二个console.debug调用包含一个空对象。

是什么给出的？不应该第二位调试输出包含相同的属性，但JSONified？

以下是完整的代码：

    function get_race() {

    var RaceModel = Backbone.Model.extend({
        urlRoot: api_root + 'race/1/?format=json',

    });

    var RaceView = Backbone.View.extend({
        template: _.template('<h1>a template</h1><h2>desc: <%= year %></h2>'),
        initialize: function() {
            this.model = new RaceModel();
            this.model.fetch();
            this.render();
        },
        render: function() {
            console.debug(this.model);
            foo = this.model.toJSON();
            console.debug(foo);
            this.$el.html(this.template(this.model));
            return this;
        }
    });


    var race_view = new RaceView({ el: $("#backbone_test") });

Answer 1

我认为正在发生的事情是在获取模型之前调用渲染。在调用fetch并删除对render的调用之前，应该将其置于初始化状态。

this.listenTo(this.model, "change", this.render);

当像这样直接调用render时，this.model.toJSON（）将返回一个空对象，因为那时没有任何内容。但是你的调试器会在获取它时更新this.model，因为它显示了一个引用。

为了证明这一点，尝试记录一些不可变的东西，如console.log（JSON.stringify（this.model））;

Answer 2

将您的提取代码更改为：

that = this
this.model.fetch(
    success: function () { 
        that.render();
);

Answer 3

您最有可能被日志中的结果欺骗。使用正确值记录对象的原因是console.log（）保留对已记录对象的引用。可以使用以下html页面在Chrome中观察到这一点：

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
    var object = { title: null };
    console.log(object);
    function update() { object.title = document.getElementById("title").value; }
</script>
</head>
<body>
    <input id="title" type="text" value="New title"/><br/>
    <button onclick="update()">Update title</button>
</body>
</html>

在未加载开发者工具的情况下在Chrome中加载页面。
打开javascript控制台，检查记录的实例的值是否为空。
关闭javascript控制台。
点击按钮更新标题。
重新打开javascript控制台。现在使用新值更新标题，即使它是相同的日志行。

要确保在呈现视图之前已加载值，您需要等待结果。我个人会选择nEEbz解决方案。

了解backbone.js属性和toJSON（）

3 个答案: