在 Backbone 中为相关模型创建视图和模板

Question

我在使用 Backbone 的视图和模板列出“许可证”时遇到问题。 数据结构是这样的：

    {
        "items":
        [
            {
                "id": "1",
                "name": "Hello Kitty",
                "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                "slug": "brand-1",
                "img": "hellokitty",
                "code": "131T003-2",
                "category": "children",
                "licences": "5",
                "licence": [
                    {
                        "_id": "1",
                        "price": "22",
                        "type": "type1",
                        "text": "this is the description of this licence"
                    }, {
                        "_id": "2",
                        "price": "24",
                        "type": "type1",
                        "text": "this is the description of this licence"
                    }
                ]
            },

            {
                "id": "2",
                "name": "Lana Del Ray",
                "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                "slug": "brand-2",
                "img": "lana",
                "code": "p-002",
                "category": "music",
                "licences": "5",
                "licence": [
                    {
                        "_id": "3",
                        "price": "22",
                        "type": "type6",
                         "text": "this is the description of this licence"
                    }, {
                        "_id": "4",
                        "price": "22",
                        "type": "type7",
                         "text": "this is the description of this licence"
                    }
                ]
            }
}

我正在使用许可证模型和项目模型，我还为两者创建了集合：

物品型号：

define(["backbone", 'models/licenceModel', 'backbone-relational'], function(Backbone, Licence){

    Item = Backbone.RelationalModel.extend({
        relations : [{
            key          : 'licence',
            type         : Backbone.HasMany,
            relatedModel : Licence,
            collectionType: 'licenceCollection'
        }]
        defaults: {
            "id": "",
            "name": "",
            "description": "",
            "slug": "",
            "img": "",
            "price": "",
            "code": "",
            "category": "",
            "licences": ""
        }
    });
    return Item;
});

许可模式：

define(["backbone", 'models/itemModel', 'backbone-relational'], function(Backbone, Item){

    Licence = Backbone.RelationalModel.extend({
        defaults: {
            "_id": "",
            "type": "",
            "text": "",
            "price": "",

        }
    });
    return Item;
});

物品收藏：

define(['backbone', 'models/itemModel'],
    function(Backbone, Item) {

    var ItemCollection = Backbone.Collection.extend({
        defaults: {
            model: Item
        },
        model: Item,
        url: 'json/items.json',

        initialize: function(){
            this.fetch( { async: false } );
        },

        parse: function(response, xhr) {
            return response.items;
        },

        filterBySlug: function( sl ) {
            return filtered = this.filter(function(data) {
                return data.get('slug') == sl;
            });
        },

        filterByName: function( name ){
            filtered = this.filter(function(data) {
                if(data.get("name").toLowerCase().indexOf(name) > -1){
                    return data;
                }
            });
            return new ItemCollection(filtered);
        },

        filterById: function(id){
            return this.get(id);
        }
    });

    return ItemCollection;
});

许可证收集：

define(['backbone', 'models/licenceModel'],
    function(Backbone, Licence) {

    var LicenceCollection = Backbone.Collection.extend({
        defaults: {
            model: Licence
        },
        model: Licence,
        url: 'json/items.json',

        initialize: function(){
            this.fetch( { async: false } );
        },

        parse: function(response, xhr) {
            return response.licence;
        }

    });

    return LicenceCollection;
});

我得到了带有模板和视图的堆栈，用于在 deplayind detailView 中列出许可证：

define(
    ['jquery',
    'backbone',
    'underscore',
    'models/itemModel',
    'text!/templates/detail_template.html'],
    function($, Backbone, _, Item, Template){

    var DetailView = Backbone.View.extend({
        el: '#todo-list',
        productInfo: $('.product_info'),

        tagName: 'li',
        model: Item,

        events: {
            "click #back": "backToList"
        },

        initialize: function( collection ) {
            this.collection = collection;
            this.render();
        },

        render: function() {
            var compiledTemplate = _.template( Template, this.collection[0].toJSON() );
            container = this.$el;
            this.$el.html( compiledTemplate );
            this.$el.find('li').fadeIn('slow', function(){
                container.find('.info').fadeIn('slow');
            });
        },

        backToList: function(ev){
            //ev.preventDefault();

            $('#clear').trigger('click');
        }
    });

    return DetailView;
});

我应该怎么做才能在此模板中列出许可证：

<li id="detail_view" class="row-fluid" data-item="<%- slug %>" data-id="<%- id %>">
    <div class="span6">
        <a href="/" id="back">Back to List</a>
        <img src="/assets/images/<%- img %>.jpg" class="product" />
    </div>
    <div class="info span6">
        <div id="container_info">
            <h2><%- name %></h2>
            <div class="title"><%- description %> </div>
            <div class="code"><strong><%- category %></strong></div>
     </div>
    </div>
</li>

Answer 1

我可能错过了，但您实际上是在任何地方创建 View 的实例吗？

您已经定义了一个并将渲染调用放在初始化中，但您随后需要创建它来启动，无论是显式地还是通过路由器和 history.start() 调用...

我不确定的另一部分是您的模板用法-我不熟悉下划线的用法，但希望您在没有任何数据的情况下使用 _.template 调用编译模板一次，然后调用结果即用数据获取html为here。