javascript - 如何在模型中的 .fetch() 之后写入从服务器接收的数据并传递给模板？

Question

美好的一天!我是 Backbone 的新手，我正在编写一个基于 Backbone + jquerymobile 的简单小应用程序。当我从服务器获取数据时，我需要将数据正确传输到 View ，然后将它们传递给模板。因为 .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;
}
});

我尝试将这部分添加到 View 中的渲染中。它有效，但我的风格不起作用。我不太确定我通过将 fetch 放入渲染中做了正确的事情，可以建议如何正确执行吗？

    var that = this
    this.model.fetch({
        data: $.param({email: localStorage.getItem('user_email')}),
        type: 'POST',
        success: function (response) {
            $(that.el).html(that.template(JSON.parse(JSON.stringify(response))));
        }
    });

Answer 1

使用内置事件来解耦一切。获取是一步，更新是不同的。在您看来，应该这样做:

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 方法(以及某些属性更改)时，都会触发 change 事件。当发生这种情况时，listenTo 方法将运行回调。您可能需要的另一个事件是sync，它在成功获取后调用。有时，如果您只想在第一次同步时渲染，然后自己控制它，则可能需要listenToOnce。

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

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