Backbone JS - Просмотр не рендеринга

Я пытаюсь получить простую страницу html, чтобы отобразить полученные данные коллекции на странице html. Ошибок не возникает, поэтому я не могу сказать, что я делаю неправильно.Backbone JS - Просмотр не рендеринга

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

Модель

Department = Backbone.Model.extend({ 
    idAttribute: "dept_id", 
    urlRoot: appRouteUrl + '/api/v1/departments', 
    defaults: { 
    dept_code: '', 
    dept_desc: '' 
    } 
});

Коллекция

DepartmentCollection = Backbone.Collection.extend({ 
    url: appRouteUrl + '/api/v1/departments', 
    model: Department 
});

Посмотреть

var DepartmentListView = Backbone.View.extend({ 
    template: "#department-list-template", 
    tagName: "ul", 
    render: function() { 
    var results = []; 
    var compiledTemplate = _.template(this.template); 
    this.collection.each(function(department) { 
     console.log(department); 
     var html = compiledTemplate(department.toJSON()); 
     results.push(html); 
    }); 
    this.$el.html(results); 
    return this; 
    } 
});

Inde х

<!DOCTYPE html> 
<html> 

<head> 
    <title>AppName</title> 
</head> 

<body> 
    <div class="departments"> 
    <script type="text/template" id="department-list-template"> 
     <span><%= dept_desc %></span> 
    </script> 
    </div> 
    <script> 
    var departments = new DepartmentCollection(); 
    departments.fetch(); 

    var departmentList = new DepartmentListView({ 
     collection: departments 
    }); 

    $('.departments').html(departmentList.render().$el); 
    departmentList.render(); 
    </script> 
</body> 

</html>

источник

2016-06-30 merty41

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

Кроме того, вы не должны добавлять шаблон в элемент, который можно удалить.

Department = Backbone.Model.extend({ 
 
    idAttribute: "dept_id", 
 
    defaults: { 
 
    dept_code: '', 
 
    dept_desc: '' 
 
    } 
 
}); 
 

 
DepartmentCollection = Backbone.Collection.extend({ 
 
    model: Department 
 
}); 
 

 
var DepartmentListView = Backbone.View.extend({ 
 
    template: _.template($('#department-list-template').html()), 
 
    tagName: "ul", 
 
    render: function() { 
 
    this.$el.html(this.template({ 
 
     departments: this.collection.toJSON() 
 
    })); 
 
    return this; 
 
    } 
 
}); 
 
var departments = new DepartmentCollection([{ 
 
    dept_id: 1, 
 
    dept_code: 'test1', 
 
    dept_desc: 'test1' 
 
}, { 
 
    dept_id: 2, 
 
    dept_code: 'test2', 
 
    dept_desc: 'test2' 
 
}]); 
 

 
/* 
 
departments.fetch({ 
 
    success: function(){ 
 
    // render the view here 
 
    } 
 
}); 
 
*/ 
 

 
var departmentList = new DepartmentListView({ 
 
    collection: departments 
 
}); 
 

 
$('.departments').html(departmentList.render().$el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 
<div class="departments"></div> 
 
<script type="text/template" id="department-list-template"> 
 
    <% _.each(departments,function(deparment){ %> 
 
    <li><span><%= deparment.dept_desc %></span></li> 
 
    <% }); %> 
 
</script>

источник

2016-06-30 17:01:21

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

Вы вызываете рендер до вызова Ajax закончена. просто используйте отложенную и вызывать рендеринг при завершении выборки.

Попробуйте изменить HTML таким образом

<!DOCTYPE html> 
<html> 
<head> 
    <title>AppName</title> 

</head> 
<body> 
<script type="text/template" id="department-list-template"> 
    <li><%= dept_desc %></li> 
</script> 


<div class="departments"> 

</div> 
<script type="text/javascript"> 

    var departments = new DepartmentCollection(); 

    var departmentList = new DepartmentListView({ 
    collection: departments 
    }); 
    $.when(departments.fetch()).then(function() { 
    $('.departments').html(departmentList.render().$el); 
    }); 

</script> 
</body> 
</html>

и вид

var DepartmentListView = Backbone.View.extend({ 
     template: _.template($('#department-list-template').html()), 
     tagName: "ul", 


     render: function() { 
      var results = []; 

      var self = this; 
      this.collection.each(function (department) { 
       console.log(department); 
       var html = self.template(department.toJSON()); 
       results.push(html); 
      }); 

      this.$el.html(results); 

      return this; 
     } 

    });

источник

2016-06-30 14:52:02

Когда я сделать выше, я получаю следующее сообщение отображается на странице; # department-list-template # department-list-template – merty41

попробуйте использовать этот $ ('. department'). html (departmentList.render(). el); –

По-прежнему получается тот же результат. – merty41

Функция шаблона подчеркивание принимает HTML строку, но вы даете ему идентификатор строки. Попробуйте

var DepartmentListView = Backbone.View.extend({ 
    template: _.template($('#department-list-template').html()), 


    tagName: "ul", 

    render: function(){ 
    var results = []; 

    this.collection.each(function(department){ 
    var html = this.template(department.toJSON()); 
    results.push(html); 
    }); 

    this.$el.html(results); 

    return this; 
    } 

});

EDIT: используя правильный контекст

render: function(){ 
    var results = []; 
    var self = this; 
    this.collection.each(function(department){ 
    var html = self.template(department.toJSON()); 
    results.push(html); 
    }); 

    this.$el.html(results); 

    return this; 
    }

источник

2016-06-30 15:09:35

Я пробовал это предложение выше, но throws dept_list_view.js: 11 Uncaught TypeError: this.template не является функцией – merty41

Да, теперь я понимаю, потому что в 'each' контекст больше не является представлением. Попробуйте мое редактирование –

Все еще получаю сообщение об ошибке; dept_list_view.js: 11 Uncaught TypeError: self.template не является функцией – merty41

Backbone JS - Просмотр не рендеринга

ответ

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