Как ждать выборки в каждом цикле

Question

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

У меня есть этот код:

self.CollectionTest.each(function(item, index) { 
    if (item.attributes.QuesAnswerType == 7) { 
     self.dtype = item.attributes.QuesAnswerValue_Para; 
     self.dropdowncollection = new QuestionaireDetailsCollection; 
     self.dropdowncollection.fetch({ 
      reset: true, 
      url: 'api/Variables/getPara', 
      data: $.param({ type: self.dtype }), 
      success: function() { 
       self.dropdowndataSource = new kendo.Backbone.DataSource({ 
        collection: self.dropdowncollection, 
       }); 

       var cbid = "cb" + item.attributes.Id; 
       $('<input id="' + cbid + '" dataTextField: "Name" dataValueField: "Id" data-bind="value:QuesDetAnswer"/>') 
        .appendTo("#divrb" + item.attributes.Id) 
        .kendoDropDownList({ 
         dataTextField: "Name", 
         dataValueField: "Id", 
         dataSource: self.dropdowndataSource, 
         autoBind: true, 

        }); 
      } // end of success 
     }); 

Answer 1

Мне кажется, что проблема заключается в том, что вы всегда назначая значения для self объекта. Код метода успеха выполняется асинхронно. Следовательно, значения объекта self переопределяются при каждом вызове метода успеха.

Я бы рекомендовал попытаться избавиться от ссылки self в методе успеха. Что-то вроде

var dropdowncollection = new QuestionaireDetailsCollection; 
dropdowncollection.fetch({reset: true, url: 'api/Variables/getPara', data: $.param({ type: self.dtype }), success: function() { 
    var dropdowndataSource = new kendo.Backbone.DataSource({ 
     collection: self.dropdowncollection, 
    }); 

    var cbid = "cb" + item.attributes.Id; 
    $('<input id="' + cbid + '" dataTextField: "Name" dataValueField: "Id" data-bind="value:QuesDetAnswer"/>') 
    .appendTo("#divrb" + item.attributes.Id) 
    .kendoDropDownList({ 
     dataTextField: "Name", 
     dataValueField: "Id", 
     dataSource: dropdowndataSource, 
     autoBind: true, 
    }); 
} 

Answer 2

Вы приближаетесь к проблеме неправильным образом. Вместо того, чтобы использовать все магистрали, как это должно быть, вы пытаетесь жестко закодировать все в обратных вызовах. Это callback hell.

Что вы пытаетесь сделать, это сделать коллекцию. Там очень много вопросов по поводу предоставления списка/коллекции на переполнение стека, вот некоторые из моих собственных ответов, которые имеют список рендеринга в качестве примера:

• Rendering Backbone collection from XML data
• Detailed explanation of Backbone using a list example
• Another list example

Я попытаюсь продемонстрировать, как извлекать их перед рендерингом.

Укажите URL-адрес, когда он принадлежит, в класс коллекции.

var QuestionaireDetailsCollection = Backbone.Collection.extend({ 
    url: 'api/Variables/getPara', 
}); 

Wrap элемент визуализации логики в целях

var ItemView = Backbone.View.extend({ 
    template: _.template('<input id="cb<%= Id %>" dataTextField="Name" dataValueField="Id" data-bind="value:QuesDetAnswer"/>'), 
    id: function() { 
     return "divrb" + this.model.id; 
    }, 
    initialize: function() { 
     // let the item view handle the collection 
     this.collection = new QuestionaireDetailsCollection(); 

     this.listenTo(this.collection, 'sync', this.onSync); 

     this.collection.fetch({ 
      reset: true, 
      data: $.param({ type: this.model.get('QuesAnswerValue_Para') }), 
     }); 
    }, 
    render: function() { 
     this.$input = $(this.template({ Id: this.model.id })) 
     this.$el.html(this.$input); 

     this.$input.kendoDropDownList({ 
      dataTextField: "Name", 
      dataValueField: "Id", 
      dataSource: this.dropdowndataSource, 
      autoBind: true, 
     }); 
     return this; 
    }, 
    onSync: function() { 
     this.dropdowndataSource = new kendo.Backbone.DataSource({ 
      collection: this.collection, 
     }); 

     this.render(); 
    }, 
}); 

также обернуть рендеринг списка в представлении

var ListView = Backbone.View.extend({ 
    initialize: function() { 
     this.childViews = []; 
     this.quesAnswerType = 7; 
     this.listenTo(this.collection, 'sync', this.render); 
    }, 
    render: function() { 
     this.$el.empty(); 

     // filter the models before rendering 
     _.each(this.collection 
      .where({ 
       QuesAnswerType: this.quesAnswerType 
      }), this.renderItem, this); 
     return this; 
    }, 
    renderItem: function(model) { 
     var view = new ItemView({ model: model }); 
     this.childViews.push(view); 
     this.$el.append(view.render().el); 
    }, 

    cleanup: function() { 
     // avoid memory leaks 
     _.invoke(this.childViews, 'remove'); 
     this.childViews = []; 
    } 
});