3

**更新：问题可能涉及游览模板，因为我发现它认为“名称”属性未定义。这使我认为它不是传递给 ToursView 的数组，而是由于某种原因是一个字符串。**

在研究了 StackOverflow 上的类似问题后：

如何使用 Backbone.Marionette 处理嵌套的 CompositeView？

如何根据模型 javascript 数组属性正确显示 Backbone Marionette 集合视图？

使用 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!**
        }
    }

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

从 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 是各个旅游名称（即“测试都柏林”、“测试都柏林 2”等）

旅游模型和收藏品

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>
4

1 回答 1

4

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

itemViewContainer: '#ind'

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

您应该将其更改为 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 文档，并将此格式错误的文档发回。

于 2012-11-30T04:28:16.290 回答