Why is my function not being recognized?
Question
I'm currently learning about modular javascript. I don't know why my the functions that I made in a object aren't being recognized. This is for a list of people application. Can someone take a look at it? This is my people.js file
(() => {
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();
})();
And here is my 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>
It would be much appreciated. Javascript is just so overwhelming!
2 answers
solution1
1 2016-11-20 12:19:41
That's because arrow functions are automatically bound to the outside this , which is window in your case. The this inside of your functions isn't what you think it is (try console.log(this) in any of your functions, to see what I'm referring to)
Instead, use the full version: init: function() { or the short method version: init() {
solution2
0 2016-11-20 12:19:33
text/template is not going to get run by the browser. Even if people.js is a JavaScript file, your browser won't run it because it doesn't know what to do with text/template .
<script src="people.js"></script>
Remove type attribute.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.