Javascript 如何在模型中的.fetch（）之后写入从服务器接收的数据并将其传递给模板？

你好！我是主干网新手，我正在编写一个简单的基于应用程序的主干网+jquerymobile。 当我从服务器获取数据时，我需要将数据正确地传输到视图，并在视图中传递到模板。因为

.fetch（）

是异步的，所以我不能只传入渲染我的模型。在

.fetch（）

从服务器接收数据，写入模型，然后传递到模板之后，我如何才能这样做

//template
<script type="text/html" class="template" id="profile-form">
 <div data-role="header">
    <h3>Step 4</h3>
    <a href="#main" data-theme="a">Home</a>
    <a href="#logout" data-theme="a">logout</a>
 </div>
 <div data-role="content">
     <h2 class="ui-li-heading"><%= username %></h2>
     <p class="ui-li-desc"><strong><%= phone %></strong></p>
 </div>
</script>

// model
var UserInfo = Backbone.Model.extend({
url: appConfig.baseURL + "users/",
});

// routes
profileInfo: function () {
    var user = new UserInfo()
    this.changePage(new ProfilePageView({ model: user }));
},

// view
var ProfilePageView = Backbone.View.extend({

initialize: function () {
    this.template = $.tpl['profile-form'];
},

render: function (eventName) {
    $(that.el).html(that.template());
    return this;
}
});

---

使用内置事件将所有内容解耦。获取是一个步骤，更新是不同的。在你看来，你应该：

initialize: function () {
    this.template = $('#profile-form').html();
    this.listenToOnce(this.model, 'sync', function(){ 
        this.render();
        //this.listenTo(this.model, 'change', this.render, this);
 }, this);
},

每次模型调用set方法（以及某些属性更改）时，它都会触发一个更改事件。发生这种情况时，listenTo方法将运行回调。您可能需要的另一个事件是sync，它在成功获取后调用。有时，如果只想在第一次同步时进行渲染，然后自己控制，则可能需要ListentOnce

您的模板可能也需要传入其参数：

render: function(){
    $(this.el).html(_.template(this.template, this.model.toJSON()));
    return this;
}

至于什么时候去拿，这取决于你自己。您可以定期获取，也可以仅在有人路由到该页面时获取。在您给出的代码中，我将执行以下操作：

profileInfo: function () {
    var user = new UserInfo();
    user.fetch();
    this.changePage(new ProfilePageView({ model: user }));
}

---

看来我需要，但有个问题

render

运行两次，我将

console.log（this.model.toJSON（））

放在

render

的开头，并将

console.log（“success”）

放在fetch（）的success选项中。首先它输出空对象，下一个关于我的元素未找到的错误，下一个具有所有属性的正确对象，最后它输出“success”。我想我需要在对象传递到模板之前获取它，但不是在传递到模板之后。因此，用这一行替换更改行

this.listenToOnce（this.model，'sync'，function（）{this.render（）；this.listenTo（this.model，'change'，this.render，this）；}，this）

现在

成功

并正确地交换对象，但一开始仍然显示空的

对象{}

和引用错误。如果我将

控制台.log（this.model.toJSON（））

更改为

控制台.log（this.model）

中的

渲染

其输出两个相等的字符串o_OSo，这里是发生的情况。log（this.model）将调用.toJSON以获取它在屏幕上显示的内容。toJson将获取重要属性，并从中生成JSON对象。因此，事实上，他们展示了同样的东西并不令人惊讶。但是，此.template（this.model）将不会加载正确的信息。您看到的另一个问题是，在“同步”之前，模型对象是空的。因此，在“同步”之前发生的任何console.log都将显示一个空对象。如果未加载模板，则可以使用u.template（this.template、this.model.toJson（））；

profileInfo: function () {
    var user = new UserInfo();
    user.fetch();
    this.changePage(new ProfilePageView({ model: user }));
}