Question

我目前正在学习模块化javascript。我不知道为什么我在一个物体中所做的功能没有被识别出来。这是一个人员应用程序列表。有人可以看看吗？这是我的people.js文件

(() => {
    var people = {
        people: ['Will', 'Laura'],
        init: () => {
            this.cacheDom();
            this.bindEvents();
            this.render();
        },
        cacheDom: () => {
            this.$el = $('#peopleModule');
            this.$button = this.$el.find('button');
            this.$input = this.$el.find('input');
            this.$ul = this.$el.find('ul');
            this.template = this.$el.find('#people-template').html();
        },
        bindEvents: ()=>{
            this.$button.on('click', this.addPerson.bind(this));
        },
        render: () =>{
            var data = {
                people: this.people,
            };
            this.$ul.html(Mustache.render(this.template,data));
        },
        addPerson: () => {
            this.people.push(this.input.val());
            this.render();
        }
    };

    people.init();
})();

这是我的HTML

<!DOCTYPE>
<html>

<head>
    <title>Nate</title>
</head>

<body>
    <div>
        <h1>This is my Wonderful application</h1>
    </div>
    <div id="peopleModule">
        <h1>People</h1>
        <input placeholder="name" type="text">
        <button id="addPerson">Add Person</button>
        <ul id="people">
            <script id="people-template" type="text/template">
                    {{#people}}
                        <li>
                            <span>{{.}}</span>
                            <i class="del">X</i>
                        </li>
                    {{/people}}
                </script>
        </ul>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
    <script src="people.js" type="text/template"></script>
</body>

</html>

非常感谢。 Javascript真是太棒了！

Answer 1

这是因为箭头函数会自动绑定到外部this，在您的情况下为window。您的函数内部的this不是您认为的那样（在任何函数中尝试console.log(this)，看看我指的是什么）

相反，请使用完整版：init: function() {或简短方法版本：init() {

Answer 2

people.js不会被浏览器运行。即使text/template是JavaScript文件，您的浏览器也不会运行它，因为它不知道如何处理<script src="people.js"></script>。

type

删除var row = '... onclick=\"Delete_Row(\'+table_len+\')\"></td></tr>';属性。

为什么我的功能不被识别？

2 个答案: