Магистраль не может вызывать метод «toJSON» неопределенных/не загружаемых данных

Я пытаюсь получить некоторые данные и отображать их с помощью Backbone, но не повезло - я не получаю никаких ошибок, просто никакого рендеринга (я построил это действительно простое приложение, используя пример Todos в качестве руководства)Магистраль не может вызывать метод «toJSON» неопределенных/не загружаемых данных

index.html:

<!doctype html> 
<html> 
<head> 
    <title>Hello Backbone</title> 
</head> 
<body> 
    <div id="sps-container"> 
     <div id="main"> 
      <ul id="service-providers"></ul> 
     </div> 
    </div> 
</body> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script> 
<script type="text/javascript" src="/app.js"></script> 

    <!-- Templates --> 

    <script type="text/template" id="sp-template"> 
     <div class="view"> 
     <label><%- name %></label> 
     </div> 
    </script> 

</html>

app.js

$(function(){ 

    var ServiceProvider = Backbone.Model.extend({ 
     defaults : function() { 
      return { 
       id : "", 
       version : 1, 
       name : "" 
      }; 
     } 
    }); 

    var ServiceProviderList = Backbone.Collection.extend({ 
     url: '/web-admin/faces/Backbone/data.json', 
     model : ServiceProvider 
    }); 

    var myCollection = new ServiceProviderList(); 

    var ServiceProviderView = Backbone.View.extend({ 
     el : $("#service-providers"), 
     tagName : "li", 
       initialize : function() { 
        _.bindAll(this, 'render'); 
        this.template = _.template($('#sp-template').html()); 
        this.render(); 
       }, 
     render : function() { 
      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    myCollection.fetch(function(c) { 
     var v = new ServiceProviderView(c); 
     main.html(v.render().el); 
    }); 
     var SPView = new ServiceProviderView(); 
});

data.json

[ 
    { 
     "id": "03c88b31-6719-4662-9ad8-64f247de13f0", 
     "version": 1, 
     "name": "Dino Tel" 
    }, 
    { 
     "id": "936690b4-6a4a-436d-abed-8ca316fbae22", 
     "version": 1, 
     "name": "Krusty Tel" 
    } 
]

Я думаю, что это не загрузка каких-либо данных - никаких других ошибок нет, и json-файл доступен. Я что-то упускаю?

источник

2013-11-07 Zen

Где произносится 'this.main'? Вы ничего не делаете в AppView. – orange

Вы не визуализируете ничего в AppView. Кроме того, проверка ServiceProvider.lenght должна использовать экземпляр myCollection, а ServiceProviderView должен быть создан и добавлен в DOM в AppView.

Update 1:

Я также не уверен, что если вы можете использовать элемент из DOM в качестве шаблона (кукольный позволяет такую вещь (с layout), но чистый Backbone не делает). Вы должны поместить AppView в шаблон так же, как и с ServiceProviderView, а затем позвонить $(body).html(appView.render().el).

Update 2:

Там еще один вопрос (по крайней мере). myCollection.fetch() использует ajax и поэтому является асинхронным. Возможно, у вас нет данных, которые вы хотите отобразить. Используйте его вне представления.

var main = $(body); 
myCollection.fetch(function(c) { 
    var appView = new AppView(c); 
    main.html(appView.render().el); 
}

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

источник

2013-11-07 23:15:39 orange

Я понял и установил this.main в '$ (" # main ")' in 'initialize' на' AppView' (обновленный основной пост). Я не уверен, как я должен добавить «ServiceProviderView» в DOM, когда-то созданный экземпляр (я просто создаю экземпляр в функции рендеринга AppView? Или там больше?) - не могли бы вы показать мне пример? Спасибо – Zen

Я бы, вероятно, имел только 1 вид и использовал шаблон для итерации по каждой модели. Если вы хотите сохранить. отдельный, вам нужно создать экземпляр 'ServiceProviderView' в' AppView'. Как только вы получите эту работу, я предлагаю использовать «Marionette.js», поскольку он позволяет просматривать суб-представления и многое другое. – orange

Я немного изменил структуру (только один вид) и добавил дополнительную информацию на главный пост - спасибо! – Zen

Магистраль не может вызывать метод «toJSON» неопределенных/не загружаемых данных

ответ

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