2016-11-21 4 views
-1
var view = { 
    displayTodos: function() { 
     var todosUl = document.querySelector('ul'); 
     todosUl.innerHTML = ''; 
     todoList.todos.forEach(function(todo){ 
      var todoLi = document.createElement('li'); 
      var todoTextWithCompletion = '' 
      if (todo.completed) { 
       todoTextWithCompletion = '(X) ' + todo.todoText; 
      } 
      else { 
       todoTextWithCompletion = '() ' + todo.todoText; 
      } 
      todoLi.textContent = todoTextWithCompletion; 

      todoLi.appendChild(this.createDeleteButton()); 
      todosUl.appendChild(todoLi); 
     }); 
    }, 
    createDeleteButton: function() { 
     var deleteButton = document.createElement('button'); 
     deleteButton.textContent = 'Delete'; 
     deleteButton.className = 'deleteButton'; 
     return deleteButton; 
    } 
}; 

Я пытался добавить кнопку к каждому пункту в моем списке, но теперь, когда я бегу view.displayTodos() Я получаю сообщение об ошибке: «Ошибка типа: this.createDeleteButton не является функцией «Javascript AppendChild() аргумент не является функцией

Я думаю, что проблема связана с линией: todoLi.appendChild (this.createDeleteButton()); , но я не понимаю, почему он не работает.

Заранее спасибо за помощь

+2

контекст 'this' не то, что вы думаете. – epascarello

+0

Включите MCVE (http://stackoverflow.com/help/mcve). Как сказал epascarello, похоже, вы неправильно понимаете сферу действия «этого». – Marco

+2

Вы, вероятно, передаете 'view.displayTodos' как функцию и теряете' this'. В этом примере простейшим решением является замена 'this.createDeleteButton()' на 'view.createDeleteButton()' –

ответ

-1

простой способ решить это сохранить this в that

var view = { 
 
    displayTodos: function() { 
 
     console.log("displayTodos",this); 
 
     var arr=[1,2]; 
 
     var that=this; 
 
     arr.forEach(function(todo){ 
 
    // console.log("todolist",this); 
 
     that.createDeleteButton(); 
 
     
 
     }); 
 
    }, 
 
    createDeleteButton: function() { 
 
     console.log("create"); 
 
    } 
 
    }; 
 
view.displayTodos();

второй метод :::: Пропустите текущий объект в качестве второго параметр

var view = { 
 
    displayTodos: function() { 
 
     var arr=[1,2]; 
 
     
 
     arr.forEach(function(todo){ 
 
     
 
     this.createDeleteButton(); 
 
     
 
     },this); 
 
    }, 
 
    createDeleteButton: function() { 
 
     console.log("create"); 
 
    } 
 
    }; 
 
view.displayTodos();

1

this.createDeleteButton() замена с view.createDeleteButton(), кажется, работает

Благодаря Juan

Смежные вопросы