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

Creating view and template for related models in Backbone

本文关键字:视图 创建 模型      更新时间:2023-09-26

我在列出带有 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;
});

我得到了带有模板和视图的堆栈,用于列出许可证的详细信息视图:

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>

我可能错过了它,但你实际上是在任何地方创建视图的实例吗?

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

我不确定的另一部分是您的模板用法 - 我不熟悉下划线用法,但希望您使用没有任何数据的 _.template 调用编译模板一次,然后用数据调用其结果以获取 html 如此处。