javascript - Meteor: Uncaught TypeError: Cannot read property 'events' of undefined -
i working on meteortips' your second meteor application tutorial, , @ end of chapter 5: routing, part 2.
when go http://localhost:3000/ following screen:
and when check chrome console, following error:
uncaught typeerror: cannot read property 'events' of undefined todos.js:85 here content of todos.js file:
todos = new meteor.collection('todos'); lists = new meteor.collection('lists'); if(meteor.isclient){ // client code goes here template.todos.helpers({ 'todo': function(){ var currentlist = this._id; return todos.find({ listid: currentlist }, {sort: {createdat: -1}}) } }); template.addtodo.events({ 'submit form': function(event){ event.preventdefault(); var todoname = $('[name="todoname"]').val(); var currentlist = this._id; todos.insert({ name: todoname, completed: false, createdat: new date(), listid: currentlist }); $('[name="todoname"]').val(''); } }); template.todoitem.events({ // events go here 'click .delete-todo': function(event){ event.preventdefault(); var documentid = this._id; var confirm = window.confirm("delete task?"); if(confirm){ todos.remove({ _id: documentid }); } }, 'keyup [name=todoitem]': function(event){ if(event.which == 13 || event.which == 27){ $(event.target).blur(); } else { var documentid = this._id; var todoitem = $(event.target).val(); todos.update({ _id: documentid }, {$set: { name: todoitem }}); } }, 'change [type=checkbox]': function(){ var documentid = this._id; var iscompleted = this.completed; if(iscompleted){ todos.update({ _id: documentid }, {$set: { completed: false }}); console.log("task marked incomplete."); } else { todos.update({ _id: documentid }, {$set: { completed: true }}); console.log("task marked complete."); } } }); template.todoitem.helpers({ 'checked': function(){ var iscompleted = this.completed; if(iscompleted){ return "checked"; } else { return ""; } } }); template.todoscount.helpers({ 'totaltodos': function(){ var currentlist = this._id; return todos.find({ listid: currentlist }).count(); }, 'completedtodos': function(){ var currentlist = this._id; return todos.find({ listid: currentlist, completed: true }).count(); } }); template.addlist.events({ 'submit form': function(event){ event.preventdefault(); var listname = $('[name=listname]').val(); lists.insert({ name: listname }, function(error, results){ router.go('listpage', { _id: results }); }); $('[name=listname]').val(''); } }); template.lists.helpers({ 'list': function(){ return lists.find({}, {sort: {name: 1}}); } }); } if(meteor.isserver){ // server code goes here } router.route('/register'); router.route('/login'); router.route('/', { name: 'home', template: 'home' }); router.route('/list/:_id', { name: 'listpage', template: 'listpage', data: function(){ var currentlist = this.params._id; return lists.findone({ _id: currentlist }); } }); router.configure({ layouttemplate: 'main' }); and here content of todos.html file:
<!-- templates --> <template name="todoitem"> <li class="{{checked}}"> <input type="checkbox" {{checked}}> <input type="text" value="{{name}}" name="todoitem"> [<a href="#" class="delete-todo">delete</a>] </li> </template> <template name="todos"> <p>{{_id}}</p> {{> addtodo}} <ul> {{#each todo}} {{> todoitem}} {{/each}} </ul> {{> todoscount}} </template> <template name="addtodo"> <form> create task: <input type="text" placeholder="type task here..." name="todoname"> </form> </template> <template name="todoscount"> {{#if totaltodos}} <p>you have completed {{completedtodos}} out of {{totaltodos}} tasks.</p> {{/if}} </template> <template name="register"> <h2>register</h2> </template> <template name="login"> <h2>login</h2> </template> <template name="home"> <p>welcome todos application.</p> </template> <template name="main"> <h1>todos</h1> {{> navigation}} {{> lists}} {{> yield}} <hr /> <p>copyright © todos, 2014-2015.</p> </template> <template name="navigation"> <ul> <li><a href="{{pathfor route='home'}}">home</a></li> <li><a href="{{pathfor route='register'}}">register</a></li> <li><a href="{{pathfor route='login'}}">login</a></li> </ul> </template> <template name="lists"> <h2>lists</h2> {{> addlist}} <ul> {{#each list}} <li><a href="{{pathfor route='listpage'}}">{{name}}</a></li> {{/each}} </ul> </template> <template name="listpage"> <h2>tasks: {{name}}</h2> {{> todos}} </template> i must doing wrong, cannot figure out what: clue?
you're trying setup events on undeclared template.
you lack addlist template in html.
Comments
Post a Comment