1

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

我在一个渲染函数中，我有以下三个调试行：

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

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

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

是什么赋予了？这第二位调试输出不应该包含相同的属性但 JSON 化了吗？

以下是完整的代码：

    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") });
4

3 回答 3

3

我认为正在发生的事情是在获取模型之前调用了渲染。您应该在调用 fetch 之前将其放入 initialize 并删除对渲染的调用。

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

当像这样直接调用 render 时， this.model.toJSON() 将返回一个空对象，因为此时那里没有任何内容。但是您的调试器将在获取 this.model 时对其进行更新，因为它正在显示引用。

为了证明这一点，请尝试记录一些不可变的内容，例如 console.log(JSON.stringify(this.model));

于 2013-02-24T03:20:53.720 回答
0

将您的获取代码更改为：

that = this
this.model.fetch(
    success: function () { 
        that.render();
);
于 2013-02-24T08:01:30.300 回答
0

您很可能被日志中的结果欺骗了。使用正确值记录对象的原因是因为 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>
  1. 在未加载开发者工具的情况下在 Chrome 中加载页面。
  2. 打开 javascript 控制台并检查记录的实例的值是否为空。
  3. 关闭 JavaScript 控制台。
  4. 单击按钮以更新标题。
  5. 重新打开 JavaScript 控制台。标题现在使用新值更新，即使它是同一日志行。

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

于 2013-02-24T16:11:17.733 回答