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

Question

我在使用Backbone的视图和模板列出'licenses'时遇到问题。 的数据结构是这样的：

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

我买了模板和查看房源的堆栈许可诡计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

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

您已经定义了一个，把呈现在INITIALISE通话，但随后你需要创建它来踢东西了，无论是显式或通过路由器和history.start（）调用...

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