Как передать данные в шаблон после выполнения .fetch()?

Question

[Андрей]

Добрый день! Я пишу простенькое приложение на основе backbone+jquerymobile. Вопрос в следующем:
Когда я получаю данные с сервера, мне нужно правильно передать эти данные во вью, где они передаются в шаблон. Т.к .fetch() асинхронный, то просто передавать в render модель не получится, поэтому я попробовал сделать следующее:

Шаблон:

<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>

Модель:

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

Представление:

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

Код из routes:

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

Теперь данные передаются в шаблон, но почему то не подгружаются стили. Я не совсем уверен, что я правильно сделал, поместив fetch в render, можете посоветовать, как сделать по уму.
Нашел, что мне может помочь метод reset, но где мне его передавать не совсем понимаю. Спасибо!

Comments

[aen]

В какой моменты вы вызываете render() ?

[Андрей]

Я так понимаю render выполняется автоматически, когда вызывается новое представление

[aen]

@aphex render() не будет вызываться автоматически, если вы его сами не вызовете

Answer 1

[aen]

Я бы сделал вот так:

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

Респонс не надо проверять, потому как фетч вам модель заполнит.

Answer 2

[aen]

JSON.parse(JSON.stringify(response))
Это зачем? Клонируете данные?

Answer 3

[Андрей]

Извиняюсь, там просто response.toJSON(). Забыл исправить, когда добавлял.

Answer 4

[Артем]

Еще можно подписаться на соответствующее событие у модели (sync если не ошибаюсь).

И не совсем понял, а зачем вам это?

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