-2

Я использую python для создания фиктивного сервера, хранящего данные JSON. Я пытаюсь извлечь данные, чтобы отобразить их на панели инструментов. Я получаюПросмотреть ошибку в backbone.js

не может прочитать свойство HTML неопределенной

не может читать собственности рендера неопределенных

Что мне не хватает?

Мой позвоночник сценарий:

// Create a Model 
var Dashboard = Backbone.Model.extend({}); 

// Create a collection 
var DashboardCollection = Backbone.Collection.extend({ 
    model: Dashboard, 
    url: 'http://localhost:8889/api/test' 
}); 

// create an instance of the collection object 
var jobList = new DashboardCollection(); 
    jobList.fetch({success:function(){ 
      test.render(); 
     }}); 
     // Create a jobList view 
var jobListView= Backbone.View.extend({ 
    el: $('.jobsList'), 
    template: _.template($('#test-template').html()), 

    initialize: function(){ 
     this.render(); 
     //this.listenTo(this.model, 'change', this.render); 
     //this.listenTo(this.model, 'destroy', this.remove); 
    }, 
    render : function(){ 

     this.$el.html(this.template({'last_name':'test'})); 
     return this; 
    } 
}); 

var test = new jobListView;

И мой HTML:

<main> 
     <div class="row"> 
      <div class="left glass"> 
       <!--[if lt IE 9]> 
       <div class="legacy-ie-fix"></div> 
       <![endif]--> 
       <h1>Job List</h1> 
       <div class ="jobsList"> 

       </div> 
      </div> 
      <div class="right glass"> 
       <!--[if lt IE 9]> 
        <div class="legacy-ie-fix"></div> 
       <![endif]--> 
       <h1>Metrics</h1> 
       <div id="metrics"> 
        <div class="row"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </main> 
</body> 
<script type="text/template" id="test-template"> 
    <table class="table striped"> 
     <thead> 
      <tr> 
       <th>Data</th> 

      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><%= last_name %></td> 
      </tr> 
     </tbody> 
    </table> 
</script>

источник

2017-02-06 RomM

Ваше призвание 'test.render()' перед инициализацией тест. Помимо этого вы, вероятно, захотите использовать 'id'selector для * jobsList * или передать элемент в представление. – Jack

В дополнение к [mcve] вы должны включить полное сообщение об ошибке в свой вопрос. –

Попробуйте переместить 'jobList.fetch (...' после 'var test = new jobListView' –

Это, как представляется, проблема упорядочения.

Убедитесь, что документ готов

Если вы используете JQuery в сценарии, чтобы захватить элемент из документа (например, el: $('.jobsList')), вы должны убедиться, что HTML готов. Вы можете обернуть свой код в стиле документа готовой функции JQuery:

$(function() { 
    var JobListView = Backbone.View.extend({ 
     el: $('.jobsList'), 
     template: _.template($('#test-template').html()), 

     render: function() { 

      this.$el.html(this.template({ 'last_name': 'test' })); 
      return this; 
     } 
    }); 

});

Или просто загрузить скрипты в нижней части <body>, но внутри него.

<script type="text/template" id="test-template"> 
     Put the template above the scripts loading and inside the body. 
    </script> 
    <script src="jquery.js"> 
    <script src="underscore.js"> 
    <script src="backbone.js"> 
    <script src="script/my-app.js"> 
</body>

Важные замечания на адрес <script>. Backbone требует, чтобы jQuery и Underscore.js загружались раньше, а ваш собственный код требует Backbone (и jQuery, но это уже позабочено в цепочке зависимостей).

Declare и назначить переменную перед использованием их

Вы называете fetch на сбор, который использует представление, прежде чем он назначен. Хотя он может работать (см. var hoisting), лучше всего объявить и назначить переменные перед их использованием, когда это возможно.

// Create a list view class 
var JobListView = Backbone.View.extend({ 
    el: '.jobsList', // no need to use jQuery here. 
    template: _.template($('#test-template').html()), 

    render: function() { 

     this.$el.html(this.template({ 'last_name': 'test' })); 
     return this; 
    } 
}); 

// instantiate the view first. 
var test = new JobListView(); 

// then create an instance of the collection object 
var jobList = new DashboardCollection(); 

// and fetch it when everything is ready. 
jobList.fetch({ 
    success: function() { 
     test.render(); 
    } 
});

Обратите внимание, что JS пользовательские типы (классы) должны быть в PascalCase, а не в snakeCase как правило, утвержденном стандарте, но это не собирается сделать код неудачи.

Пропустите элемент представления

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

Вместо передать элемент в виде:

var JobListView = Backbone.View.extend({ 
    // ... 
}); 

// ...somewhere else 

var view = new JobListView({ el: '.jobsList' });

Или использовать элемент, созданный в целях Backbone.

var JobListView = Backbone.View.extend({ 
    className: 'jobList', 
}); 

// ...inside a parent view's render 
var ParentView = Backbone.View.extend({ 
    template: '<div class="job-list-1"></div><div class="job-list-2"></div>', 
    render: function() { 
     this.$el.html(this.template); 
     this.$('.job-list-1').html(new JobListView().render().el); 
     this.$('.job-list-2').html(new JobListView().render().el); 
     // ... 
     return this; 
    } 
});

Это привело бы:

<div class="job-list-1"> 
    <div class="jobList"></div> 
</div> 
<div class="job-list-2"> 
    <div class="jobList"></div> 
</div>

источник

2017-02-06 22:37:44

Просмотреть ошибку в backbone.js

ответ

Убедитесь, что документ готов

Declare и назначить переменную перед использованием их

Пропустите элемент представления

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