Question

我正在使用简单的网络应用，我收到了上述错误。请你帮帮忙吗？

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：无法读取属性＆＃39; classList＆＃39; null。

感谢您的帮助。

Answer 1

在本节中，this相当于movieApp.section。

movieApp.section = {
    init:function() {
        this.about();
        this.movies();
        this.toggle();
    },
};

所以this.toggle()正在调用movieApp.section.toggle()，然后没有将参数传递给该函数。

如果你想在'about'部分设置一个默认的活动类，你需要对你的函数执行此操作：

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();
    },
};

未捕获的TypeError：无法读取null的属性'classList'

1 个答案: