Невозможно получить шаблон для отображения с использованием backbone.js и подчеркивания

Question

Я действительно новичок в Backbone, и я повсюду искал, чтобы попытаться понять это. В основном я понимаю, как модели, представления, коллекции и шаблоны работают вместе, но по какой-то причине я просто не могу получить свою коллекцию для рендеринга в шаблоне. Используя Firebug, я получаю "this.model неопределен"

Вот мой код:

(function($) { 
window.Category = Backbone.Model.extend({}); 

window.Categories = Backbone.Collection.extend({ 
    url: "src/api/index.php/categories?accounts_id=1", 
    model: Category 
}); 

window.categories = new Categories(); 
categories.fetch(); 

window.CategoriesView = Backbone.View.extend({ 
    initialize:function() { 
     _.bindAll(this,"render"); 
     this.model.bind("reset", this.render); 
    }, 

    template:_.template($('#tpl-category').html()), 

    render:function (eventName) { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

var testTargetvar = new CategoriesView({ el: $("#collection") }); 

})(jQuery) ; 

Это данные, что моя служба REST генерирует:

[ 
    { 
    "name": "Web Design", 
    "id": 0 
    }, 
    { 
    "name": "Web Development", 
    "id": 0 
    }, 
    { 
    "name": "Waste Management Solutions", 
    "id": 0 
    } 
] 

"выборка", что Я использую показывает отображаемые данные в Firebug.

И, наконец, вот мой шаблон:

<div id="collection"></div> 
<!-- Templates --> 
<script type="text/template" id="tpl-category"> 
<span><%=name%></span> 
</script> 

Я проверил, что все необходимые скрипты, JQuery, позвоночник, подчеркивание и т.д. загружаются на страницу должным образом.

Answer 1

Я не вижу, где вы устанавливаете model свойства объекта вида. Кажется, что ваш конструктор представлений путается между тем, представляет ли он набор категорий (как предложено селектором #collection) или отдельной категорией (как предложено шаблоном и использует свойство model). Вот рабочий пример, который должен помочь вам в ваше полное решение:

http://jsfiddle.net/RAF9S/1/

(function ($) { 

    var Category = Backbone.Model.extend({}); 

    var Categories = Backbone.Collection.extend({ 

    url : "src/api/index.php/categories?accounts_id=1", 

    model : Category 

    }); 


    var categories = new Categories([ 

    { name : "One" }, 

    { name : "Two" }, 

    { name : "Three" } 

    ]); 


    var CategoryView = Backbone.View.extend({ 

    initialize : function() { 

     _.bindAll(this,"render"); 

     this.model.bind("reset", this.render); 

    }, 


    template : _.template($('#tpl-category').html()), 


    render : function (eventName) { 

     this.$el.empty().append(

     $(this.template(this.model.toJSON())).html() 

    ); 


     if (! this.el.parentNode) { 

     $("#collection").append(this.el); 

     } 


     return this; 

    } 
    // render 

    }); 


    var view, views = {}; 

    categories.each(function (category) { 

    view = new CategoryView({ 

     tagName : 'span', 

     model : category 

    }); 


    view.render(); 

    views[ category.id ] = view; 

    }); 

})(jQuery); 

В этом случае я просто вручную заселенной коллекцию с несколькими моделями вместо вашего метода fetch. Как вы можете видеть, я создаю представление для каждой модели и передаю объект модели как свойство model.

В render методе я опустошить вид элемента (this.el/this.$el), затем сделать шаблон и добавить содержимое корневого элемента к this.$el. Именно поэтому я получаю новый контент, не уничтожая сам элемент. Затем, для целей этого примера, я проверяю, находится ли элемент в документе, и если нет, добавьте его в #container.

Answer 2

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

initialize: function(){ 
    _.bindAll(this, 'render'); 
    this.template = _.template($('#frame-template').html()); 
    this.collection.bind('reset', this.render); 
}, 
render: function(){ 
    var $stages, 
    collection = this.collection; 
    this.template = _.template($('#frame-template').html());