我正在使用一个简单的Web应用程序，但收到上述错误。你们能帮我一下吗？
app.js：
var movieApp = movieApp || {};
(function () {
movieApp.controller = {
init:function() {
movieApp.router.init();
movieApp.section.init();
}
};
movieApp.router = {
init:function() {
routie({
'/about': function() {
movieApp.section.toggle('section[data-route="about"]');
},
'/movies': function() {
movieApp.section.toggle('section[data-route="movies"]');
},
' ': function() {
movieApp.section.toggle('section[data-route="about"]');
},
});
}
};
movieApp.content = {
about: {
title: "About this app",
description: "...",
},
movies: [
{
title: "Shawshank Redemption",
releaseDate: "14 October 1994",
description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
cover: "../WebApp/static/images/shawshank-redemption.jpg"
},
{
title: "The Godfather",
releaseDate:"24 March 1972",
description:"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
cover: "../WebApp/static/images/the-godfather.jpg"
},
{
title: "Pulp Fiction",
releaseDate: "14 October 1994",
description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
cover: "../WebApp/static/images/pulp-fiction.jpg"
},
{
title: "The Dark Knight",
releaseDate: "18 July 2008",
description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.",
cover: "../WebApp/static/images/the-dark-knight.jpg"
}
]
};
movieApp.section = {
init:function() {
this.about();
this.movies();
},
about:function() {
var aboutSection = {
'title': movieApp.content.about.title,
'description': movieApp.content.about.description
};
Transparency.render(document.querySelector('section[data-route="about"]'),aboutSection);
},
movies:function() {
var moviesSection = {
'header': "Favorite Movies",
'movies': movieApp.content.movies
}
// dit zorgt ervoor dat de src van img tag veranderd naar wat er staat in this.cover
var directives = {
movies: {
cover: {
src: function(params){
return this.cover
}
}
}
}
Transparency.render(document.querySelector('section[data-route="movies"]'),moviesSection, directives);
},
toggle:function(section) {
section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
document.querySelector(section).classList.toggle('active');
}
};
movieApp.controller.init();
})();
html文件如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Movies Web App</title>
<link rel="stylesheet" href="static/stylesheets/main.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/movies">Movies</a></li>
</ul>
</nav>
</header>
<main id="content">
<section data-route="about">
<header>
<h1 data-bind="title"></h1>
<p data-bind="description"></p>
</header>
</section>
<section data-route="movies">
<h1 data-bind="header"></h1>
<div data-bind="movies">
<article data-bind="movie">
<header>
<h1 data-bind="title"></h1>
<em><time data-bind="releaseDate"></time></em>
</header>
<figure>
<img data-bind="cover" src="" alt="">
</figure>
<p data-bind="description"></p>
</article>
</div>
</section>
</main>
<script src="static/js/lib/routie.js"></script>
<script src="static/js/lib/transparency.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
当我运行索引页时，出现以下错误：未捕获的TypeError：无法读取null的属性“ classList”。
谢谢您的帮助。
在本节this中等效于movieApp.section。
movieApp.section = {
init:function() {
this.about();
this.movies();
this.toggle();
},
};
因此this.toggle()呼吁movieApp.section.toggle()，然后不将参数传递给该函数。
如果要在“关于”部分设置默认的活动类，则需要对函数执行以下操作：
toggle:function(section) {
section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
document.querySelector(section).classList.toggle('active');
}
更新
根据评论，您可以toggle从此处删除该行：
movieApp.section = {
init:function() {
this.about();
this.movies();
},
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句