**更新:问题可能与游览模板有关,因为我发现它认为“名称”属性未定义。这使我认为它不是传递给 ToursView 的数组,而是出于某种原因传递给字符串。 **
研究 StackOverflow 上的类似问题后:
How to handle nested CompositeView using Backbone.Marionette?
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/
我仍然在显示 CompositeView 的嵌套 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 是各个旅游名称(即“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>
最佳答案
我不认为这是问题所在,但这应该改变:
itemViewContainer: '#ind'
在您的 CompositeView 定义中。这是不好的/无效的/可能会产生无法解释的结果。 DOM 应该只包含具有任何给定 id
的 HTML 元素的一个实例。 .在这种情况下,您有一个 <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 文档,并发回了这个格式错误的文档。
关于backbone.js - Backbone.Marionette - CompositeView 中的集合,它本身嵌套在 CollectionView 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13633780/