How to pass data to template after doing .fetch()?

Question

JavaScript

Good afternoon! I'm writing a simple backbone+jquerymobile application. The question is:
When I receive data from the server, I need to correctly pass this data to the view, where it is passed to the template. Since .fetch() is asynchronous, then simply passing the model to render will not work, so I tried to do the following:
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/",
});

Performance:

var ProfilePageView = Backbone.View.extend({
    events: {
        'click #edit': "edit"
    },

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

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

    edit: function () {
        window.workspace.navigate('#account/edit', { trigger: true});
    }
});

Code from routes:

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

Now the data is passed to the template, but for some reason the styles are not loaded. I'm not entirely sure what I did right by putting fetch in render, can you advise how to do it wisely.
I found that the reset method can help me, but I don’t quite understand where to transfer it. Thank you!

Answer 1

I would do like this:

initialize: function () {
        this.template = $.tpl['profile-form'];
        this.model.fetch({
            data: $.param({email: localStorage.getItem('user_email')}),
            type: 'POST',
        }).done(this.render);
    },

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

The response does not need to be checked, because the model will fill you with a fetch.

Answer 2

JSON.parse(JSON.stringify(response))
What is this for? Cloning data?

Answer 3

I'm sorry, it's simple response.toJSON(). Forgot to correct when adding.

Answer 4

You can also subscribe to the corresponding event on the model ( sync if I'm not mistaken).
And I do not quite understand, why do you need it?

edit: function () {
    window.workspace.navigate('#account/edit', { trigger: true});
}