Question

**更新：问题可能涉及tour-template，因为我发现它认为'name'属性未定义。这让我觉得它不是传递给ToursView的数组，而是出于某种原因而是一个字符串。 **

在StackOverflow上研究类似问题之后：

How to handle nested CompositeView using Backbone.Marionette?

How do you properly display a Backbone marionette collection view based on a model javascript array property?

Nested collections with Backbone.Marionette

...和Derick Bailey关于这个主题的优秀博客：

http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

...包括JSFiddle：

http://jsfiddle.net/derickbailey/AdWjU/

我仍然无法显示嵌套的CompositeViews CollectionView的最后一个节点。它是每个CompositeView中导致问题的最终CollectionView。

CollectionView {
    CompositeView{
        CollectionView {} //**<-- This is the troublemaker!**
        }
    }

注意：我已经提出了创建一个有效的Backbone.Collection的意义，因为传递给最终的子CollectionView的集合只是一个简单的数组。

从api返回到ToursList的数据：

[
{   "id": "1", 
    "name": "Venice", 
    "theTours": "[
        {'name': u'test venice'}, 
        {'name': u'test venice 2'}
    ]"
}, 

{   "id": "2", 
    "name": "Rome",
    "theTours": "[
        {'name': u'Test rome'}
    ]"
}, 
{   "id": "3", 
    "name": "Dublin", 
    "theTours": "[
        {'name': u'test dublin'}, 
        {'name': u'test dublin 2'}
    ]"
}
]

我正在尝试将这些嵌套在一个下拉列表中，其中导航标题是'名称'（即都柏林），后续的li是各个游览名称（即'test dublin'，'test dublin2'，等）

巡回模型和收藏

Tour = TastypieModel.extend({});

ToursGroup = TastypieCollection.extend({
  model: Tour
});

ToursByLoc = TastypieModel.extend({});

ToursList = TastypieCollection.extend({
  model: ToursByLoc,
  url:'/api/v1/location/',
});

游览视图

TourView = Backbone.Marionette.ItemView.extend({
  model: Tour,
  template: '#tour-template',
  tagName: 'li',    
});


ToursByLocView = Backbone.Marionette.CompositeView.extend({
  collection: ToursByLoc,

  template: '#toursByLoc-template',
  itemView: TourView,
  itemViewContainer: '#ind',

  initialize: function(){
    //As per Derick Bailey's comments regarding the need to pass on a
    //valid Backbone.Collection to the child CollectionView
    //REFERENCE: https://stackoverflow.com/questions/12163118/nested-collections-with-backbone-marionette

    var theTours = this.model.get('theTours');
    this.collection = new ToursGroup(theTours);
    console.log(this.model.get('name'));
    console.log(theTours);
    //To test the output --> I get:

    //Venice
    //[{'subtitle': u'ex. These prices include... but not...', 'description': u'Please enter the tour description here', 'start_time': datetime.time(2, 34, 24), 'adult_price': Decimal('123'), 'important': u'ex. Please contact us to negotiate a price if you want to book the Fiat for 1 person only.', 'teenager_student_price': Decimal('123'), 'child_price': Decimal('123'), 'under_6_price': Decimal('123'), 'location_id': 1, 'id': 1, 'name': u'test venice'}, {'subtitle': u'ex. These prices include... but not...', 'description': u'Please enter the tour description here', 'start_time': datetime.time(20, 4, 57), 'adult_price': Decimal('222'), 'important': u'ex. Please contact us to negotiate a price if you want to book the Fiat for 1 person only.', 'teenager_student_price': Decimal('222'), 'child_price': Decimal('222'), 'under_6_price': Decimal('222'), 'location_id': 1, 'id': 2, 'name': u'test 2'}] main.js:64

    //Rome
    //[{'subtitle': u'ex. These prices include... but not...', 'description': u'Please enter the tour description here', 'start_time': datetime.time(1, 28, 25), 'adult_price': Decimal('123'), 'important': u'ex. Please contact us to negotiate a price if you want to book the Fiat for 1 person only.', 'teenager_student_price': Decimal('333'), 'child_price': Decimal('333'), 'under_6_price': Decimal('333'), 'location_id': 2, 'id': 3, 'name': u'test rom1'}] main.js:64

    //Dublin
    //[] 

    this.collection = new ToursGroup(theTours);
  }
});

ToursListView = Backbone.Marionette.CollectionView.extend({
  itemView: ToursByLocView,
});

模板

  <script id="tour-template" type="text/template">
    <%= name %> //<-- THIS IS GIVING ME ISSUES
  </script>

  <script id="toursByLoc-template" type="text/template">
    <li class="nav-header"><%= name %></li>
    <div id="ind" class="indTours"></div>
    <li class="divider"></li>
  </script>

  <script id="tours-template" type="text/template">
    <%= name %>
  </script>

Answer 1

我不认为这是问题，但应该改变：

itemViewContainer: '#ind'

在CompositeView定义中

。这是坏/无效/可能产生无法解释的结果。 DOM应该只容纳具有任何给定id的HTML元素的一个实例。在这种情况下，每个CompositeView实例都有一个<div id="ind"></div>。

您应该将其更改为css类，并使用itemViewContainer的类选择器代替。

...

我使用您的代码构建了一个JSFiddle，它似乎可以工作：http://jsfiddle.net/derickbailey/QPg4D

您在应用中看到了什么结果？你期待看到什么呢？

...

查看数据的回传方式：


    "theTours": "[
        {'name': u'test venice'}, 
        {'name': u'test venice 2'}
    ]"

这是技术上有效的JSON，但它会返回一个看起来像数组的字符串，而不是实际的数组。

在我的JSFiddle中，我必须纠正这个问题：


    "theTours": [
        {'name': 'test venice'}, 
        {'name': 'test venice 2'}
    ]

请注意，我删除了[]周围的“和”，并且还删除了字符串值前面的“u”。

可能是您的服务器不正确地将数据序列化为JSON文档，并发回这个格式错误的文档。

Backbone.Marionette - CompositeView中的集合，它本身嵌套在CollectionView中

1 个答案: