2014-01-30 7 views
0

Я довольно новичок в Backbone.js, любя его до сих пор, но у меня есть небольшая проблема с попыткой получить реляционные данные для рендеринга.Проблема с getJSON в рендеринге Backbone view

В моем взгляде Backbone (называется) Я изображения Представления иметь следующий код:

// Render it 
render: function() { 

    var self = this; 

    // Empty the container first 
    self.$el.html("") 

    // Loop through images 
    self.collection.each(function(img){ 

    // convert `img` to a JSON object 
    img = img.toJSON() 

    // Append each one 
    self.$el.append(self.template(img)) 

    }, self) 
} 

Есть 3 изображения в коллекции, и они правильно шаблонные с указанным кодом. Внутри объекта img есть атрибут user, содержащий идентификатор пользователя. Я пытаюсь вернуть данные пользователя и использовать их внутри шаблона вместо ID. Я делаю, что, используя этот код:

// Render it 
render: function() { 

    var self = this; 

    // Empty the container first 
    self.$el.html("") 

    // Loop through images 
    self.collection.each(function(img){ 

    // convert `img` to a JSON object 
    img = img.toJSON() 

    /* New code START */ 

    // Each img has a `user` attribute containing the userID 
    // We'll use this to get their details 
    $.getJSON('/user/' + img.user, {}, function(json, textStatus) { 
     img.photographer = { 
     id: json.id, 
     username: json.username, 
     real_name: json.real_name 
     } 

     /* Moved 1 level deeper */ 
     // Append each one 
     self.$el.append(self.template(img)) 
    }); 

    /* New code END */ 

    }, self) 
} 

Когда я делаю это, подробности пользователя возвращаются правильно и вставлены в шаблон, но теперь я получаю 3 каждое изображение возвращается вместо 1 (т.е. 9 в всего), в совершенно случайном порядке. Что я делаю не так? Я открыт для использования методов Backbone вместо getJSON, если это упростит, я просто не мог заставить его работать самостоятельно. Я использую underscore.js для шаблонов

ответ

2

Случайный порядок, скорее всего, вызван запросами, которые срабатывают с очень близкими интервалами, и ответы, возвращающиеся из заказа, в котором они были запущены. Я не уверен, почему вы получение нескольких вещей, но если ваш шаблон отображает все, и вы вызываете это 3 раза, это может быть так?

В любом случае, когда я думаю, что вы ошибаетесь, возлагается ответственность за загрузку данных в метод рендеринга. Вы хотите, чтобы это было абстрагировано, чтобы у вас было хорошее разделение между проблемами данных и проблемами с шаблонами. Поскольку упорядочение данных представляет интерес, вы хотите, чтобы все 3 запроса загрузились до рендеринга. Существует два разных подхода к этому, в зависимости от того, до того, как до загрузки этих данных у вас есть достаточное количество данных для визуализации представления:

Если вы ожидаете от всех данных до рендеринга представления, то вы хотите визуализировать другое представление (или шаблон этого представления), в то время как данные загружаются, а затем заменяют это представлением, отображающим все данные после его загрузки.

Если у вас есть достаточное количество данных для визуализации представления, а то, что вы загружаете, вам необходимо визуализировать представление с данными, которые у вас есть в рендере, а затем, как только другие данные загружаются, используйте настраиваемый метод для изменения визуализированное представление включает ваши данные.

Если вы хотите узнать, когда все 3 заявки будут заполнены, вы можете использовать http://api.jquery.com/jquery.when/

Смежные вопросы