如何在骨干js中使用fetch而不成功

Question

刚开始学习Backbone JS。

下面的代码在控制台中获取正确的输出。

代码1：

var TodoItem = Backbone.Model.extend({
        urlRoot: 'api/todos'
    });

    var todoItem = new TodoItem({id:1});
    todoItem.fetch({

        success: function(todoItem){

            console.log(todoItem.get('description'));

            var TodoView = Backbone.View.extend({
                render: function(){
                    var html = '<h3>'+this.model.get('description')+'</h3>';
                    this.$el.html(html);
                }
            });
            var todoView = new TodoView({model:todoItem });
            todoView.render();
            console.log(todoView.el);
            }

    });

但是对于下面的代码，我得到输出为＆＃39; undefined＆＃39;在控制台。

代码2：

var TodoItem = Backbone.Model.extend({
        urlRoot: 'api/todos'
    });

var todoItem = new TodoItem({id:1});
todoItem.fetch();


var TodoView = Backbone.View.extend({
render: function(){
    var html = '<h3>'+this.model.get('description')+'</h3>';
    this.$el.html(html);
}
});
var todoView = new TodoView({model:todoItem });
todoView.render();
console.log(todoView.el);

我知道为什么我会得到这样的定义＆＃39; undefined＆＃39;在 CODE 2 中，但在 CODE 1 中，如何使用＆＃39; 获取＆＃39;没有使用＆＃39; 成功＆＃39;？ （目前我的整个查看代码强行写入内部＆＃39;成功＆＃39;，我不想以这种方式写作。）

Answer 1

fetch返回一个promise对象，您可以按照

使代码更清晰

var TodoItem = Backbone.Model.extend({
  urlRoot: 'api/todos'
});

var renderTodoView = function(todoItem) {
  console.log(todoItem.get('description'));
  var TodoView = Backbone.View.extend({
    render: function() {
      var html = '<h3>' + this.model.get('description') + '</h3>';
      this.$el.html(html);
    }
  });
  var todoView = new TodoView({
    model: todoItem
  });
  todoView.render();
  console.log(todoView.el);
}

var todoItem = new TodoItem({
  id: 1
});
todoItem
  .fetch()
  .done(renderTodoView);

Answer 2

如上所述，一种方法是使用fetch调用返回的保证。这样做时：

请注意，如果您未将this.render的上下文绑定到this，它会将其映射到意外的对象，具体取决于运行时环境，通常是全局范围。

todoItem.fetch().done(_.bind(this.render, this));

另一个选择是在“sync”事件中使用listenToOnce：

todoItem.fetch();
this.listenToOnce(todoItem, 'sync', this.render);