gpt4 book ai didi

backbone.js - Marionette 应用程序的 ChildView 错误

转载 作者:行者123 更新时间:2023-12-03 18:22:59 26 4
gpt4 key购买 nike

我是 Backbone 和 Marionette 的新手,并从书中学到了这一点 Getting Started with Backbone Marionette由 Packpub 出版。

我收到的错误是 Uncaught NoChildViewError: A "childView" must be specified我的代码是

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marionette test app</title>
<link rel="stylesheet" media="screen" href="{{ url_for('static', filename='bootstrap.css') }}">
<style type="text/css">
.container {
margin-top: 10px;
}
body {
padding-top: 60px;
padding-bottom: 40px;
}

</style>
</head>
<body>

<div id="container" class="well">
<h2>Marionette Views- CollectionView</h2>
</div>

<script id="categoryTemplate" type="text/template">
<a href="#<%= name%>" ><%= name%> (<%= booksOnCategory %>)</a>
<button class="info">Details</button>
</script>


<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap.js') }}"></script>
<script src="{{ url_for('static', filename='underscore.js') }}"></script>
<script src="{{ url_for('static', filename='backbone.js') }}"></script>
<script src="{{ url_for('static', filename='backbone.marionette.js') }}"></script>


<script type="application/javascript">
// lets create new application as below;
var BookStoreApp = new Backbone.Marionette.Application();


var BookStoreController = Backbone.Marionette.Controller.extend({
displayBooks : function(){
console.log("I will display books");
}
});

var BookStoreRouter = Backbone.Marionette.AppRouter.extend({
controller : BookStoreController,
appRoutes : {
"":"displayBooks"
}
});

BookStoreApp.addInitializer(function(){
var controller = new BookStoreController();
var router = new BookStoreRouter({controller: controller});
console.log("Hello from addInit");
});

BookStoreApp.on("initialize:after", function(){
if (Backbone.history){
Backbone.history.start();
console.log("hello from initialize:after.. .");
}

});


BookModel = Backbone.Model.extend({
defaults : {
name : "",
booksOnCategory:0
}
});

BookCollection = Backbone.Collection.extend({
model : BookModel
});

var bookModel = new BookModel({name:"Math", booksOnCategory:3});
var bookModel2 = new BookModel({name:"Art", booksOnCategory:5});
var bookModel3 = new BookModel({name:"Science", booksOnCategory:6});
var bookModel4 = new BookModel({name:"Biology", booksOnCategory:1});
var bookCollection = new BookCollection([bookModel, bookModel2, bookModel3, bookModel4]);

var BookView = Backbone.Marionette.ItemView.extend({
template : '#book-template',
tagName: 'li',
events:{
"mouseenter .info": "showDetails",
"mouseleave .info": "hideDetails"
},
showDetails: function(){
this.$(".info").popover({
title: this.model.get('name'),
content: "we have "+ this.model.get("booksOnCategory") + " left"
});
this.$(".info").popover("show");
},
hideDetails: function(){
this.$(".info").popover("hide");
}
});

CategoriesVieww = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
className: "unstyled",
itemView: BookView
});

var CategoriesView = new CategoriesVieww({
collection: bookCollection,
el: "#container" });

CategoriesView.render();

BookStoreApp.start();

</script>

</body>
</html>

注意:我正在flask-jinja2应用程序上测试这个应用程序;所以忽略 url_for在脚本标签中;因为它们是 jinja2 所要求的

最佳答案

看起来问题正是错误消息所说的;) CollectionView 生成为一系列 subview ,您 need to tell the collection view您想为这些 child 使用哪种 View 类型。

但你没有。也许只是一个错字?尝试更改您的 CategoriesVieww

CategoriesVieww = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
className: "unstyled",
childView: BookView // <-- here
});

关于backbone.js - Marionette 应用程序的 ChildView 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24583307/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com