Магистраль: как загрузить коллекцию в представлении (в том числе требуется)

Question

Я пытаюсь загрузить данные из API в представление. Однако данные не отображаются на мой взгляд.

Я попытался получить информацию о коллекции в маршрутизаторе, а также в модели. Однако дата не будет даже console.log данных. Не говоря уже о том, что я могу загрузить данные в представление.

Я использую для загрузки файлов JavaScript. Можете ли вы посмотреть и посмотреть, что я делаю неправильно здесь?

Я вижу эту консоль.log: console.log («Коллекция людей инициализирована»);

И я также вижу загруженную страницу и json. Но не console.log данных в функции URL-адрес ... На самом деле я получаю эту ошибку в консоли:

Error: A "url" property or function must be specified 

В Backbone Router:

var OF = OF || {}; 

OF.AdminRouter = Backbone.Router.extend({ 

    routes: { 
     "users": "goToUsers", 
     "users/*other": "goToUsers" 
    }, 

    goToUsers: function() { 

     require(['./models/users', './views/users_view', './views/menu_view', './collections/user_collection'], function(UsersMdl, UsersView, MenuView, UsersCollection) { 

      OF.usersView = new OF.UsersView; 
      OF.usersView.render(); 

     }); 

    } 

}); 

Коллекция:

var OF = OF || {}; 

OF.UsersCollection = Backbone.Collection.extend({ 

    initialize: function() { 
     console.log("People Collection is initialized"); 
    }, 

    url: function() { 

     var that = this; 

     var sendObj = { 
      "admin": OF.login.attributes.admin, 
      "session": OF.login.attributes.session 
     }; 


     $.ajax({ 
      url: 'php/api/users/', 
      type: "POST", 
      dataType: "json", 
      data: sendObj, 
      success: function(data) { 
       console.log(data); 
      }, 
      error: function(data) { 
       console.log("ERR: " + data); 
      } 

     }); 

    }, 

    model: OF.UsersMdl 

}); 

Модель:

var OF = OF || {}; 

OF.UsersMdl = Backbone.Model.extend({ 

    default: { 

     username: '', 
     homefoldersize: '', 
     email: '' 

    }, 

    initialize: function(){ 

     //on change functions can be done here 
     OF.usersCollection = new OF.UsersCollection(); 
     OF.usersCollection.fetch(); 

    }, 

    result: { 
     success: false, 
     message: '' 
    }, 

    validate: function(att) { 

    } 

}); 

Вид:

var OF = OF || {}; 

OF.UsersView = Backbone.View.extend({ 

    el: '#content', 

    remove: function() { 

     this.$el.empty(); 
     this.stopListening(); 
     return this; 
    }, 

    initialize: function() { 

     //set the new address variable. 
     OF.usersMdl = OF.usersMdl || new OF.UsersMdl(); 

    }, 

    render: function() { 

     /* 
     //first check if you are allowed to see this page 
     if (!OF.login || !OF.login.isValid()) { 
      OF.router.navigate('login', {trigger: true}); 
      return; 
     } 
     */ 

     //save this in that 
     var that = this; 

     //when importing of login page (and fill it with info) is done 
     $.when(OF.template.get('users-usersField', function(data) { 

      var htmlSource = $(data).html(); 
      var template = Handlebars.compile(htmlSource); 
      var compiled = template(OF.usersMdl.attributes); 

      //now place the page 
      that.$el.html(compiled); 

      //then start the menu 
     })).then(function(){ 
       setTimeout(function(){ 
        OF.menuView = new OF.MenuView; 
        OF.menuView.render(); 
       }, 100); 

      }); 

     $('#logout').show(); 

    } 

}); 

Спасибо.

Answer 1

Кажется, что вызывается инициализация коллекции дважды, а затем продолжает называть функцию json.

В инициализации вашей модели у вас есть

OF.usersCollection = new OF.UsersCollection(); 
OF.usersCollection.fetch(); 

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

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

Общий порядок вещей должен быть:

1. Вы определяете функцию URL-адрес на вашей коллекции, которая возвращает URL, где вы можете получить (сырые JSON) модели этой коллекции.
2. Вы экземпляр этой коллекции, а затем вызвать выборки на экземпляре
3. Коллекция делает вызов AJAX (который вы можете повлиять на переопределение fetch или sync) и получает обратно необработанный JSON для всех моделей.
4. Коллекция создает новые модели для каждого результата, который возвращается; эти модели автоматически добавляются в коллекцию, и их .collection автоматически устанавливается в коллекцию.
5. После OF.usersCollection.fetch().done(function() {... у вас могут быть свои взгляды, которые начинают делать вещи, так как теперь ваша коллекция должна быть установлена.