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;
});

我得到了模板和视图，用于列出许可证wile desplayind 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（）调用...

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

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

1 个答案: