Вопрос об этом в методе jQuery.on () - PullRequest
Новая
       32

Вопрос об этом в методе jQuery.on ()

0 голосов
/ 21 мая 2019

Привязка к событию является распространенным шаблоном в JS, и вот один из способов сделать это из кода, который я прочитал: $('#toggle-all').on('change', this.toggleAll.bind(this));

В этом случае есть вход с идентификатором toggle-all , который запускает метод this.toggleAll при нажатии.

Однако, даже без привязки, например, $('#toggle-all').on('change', this.toggleAll);, метод toggleAll все еще может работать, хотя в середине метода обнаруживается ошибка.Но это все еще работает.

Однако для другого метода: todoLi.appendChild(this.createDeleteButton());

this.createDeleteButton() вообще не запускается , если я его не связываю.В чем разница между двумя примерами?Я знаю, что один передает функцию (обратного вызова) в качестве параметра, а другой непосредственно запускает метод.Но второй пример не запускается вообще без привязки , а метод this.toggleAll выполняется даже без привязки.Почему это так? 

var App = {
    bindEvents: function () {
        $('#toggle-all').on('change', this.toggleAll); // without binding
    }, 

    toggleAll: function (e) {
        console.log(this); // prints jQuery object which is the input #toggle-all
        var isChecked = $(e.target).prop('checked');

        // error from this line onward, which is expected.
        this.todos.forEach(function (todo) { // "this" is the input element, hence error
           todo.completed = isChecked;
        });

       this.render();
    }
};

Для второго варианта, вот код: 

var view = {
  displayTodos: function() {
    var todosUl = document.querySelector('ul');
    todosUl.innerHTML = '';

    todoList.todos.forEach(function(todo, position) {
      var todoLi = document.createElement('li');
      var todoTextWithCompletion = '';

      if (todo.completed === true) {
        todoTextWithCompletion = '(x) ' + todo.todoText;
      } else {
        todoTextWithCompletion = '( ) ' + todo.todoText;
      }

      todoLi.id = position;
      todoLi.textContent = todoTextWithCompletion;
      todoLi.appendChild(this.createDeleteButton());
      todosUl.appendChild(todoLi);
    }, this); // binding "this". If I remove it, the error I get in the console is: client.js:90 Uncaught TypeError: this.createDeleteButton is not a function
  },

  // creates a delete button beside every li element in the DOM.
  createDeleteButton: function() {
    console.log(this);
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.className = 'deleteButton';
    return deleteButton;
  },

Основной вопрос: почему метод может быть запущен без привязки (впервый случай).Но во втором случае его вообще нельзя запустить без привязки?AKA Почему jQuery.on () принимает несвязанный this.toggleAll, но appendChild не может принять размеченный this.createDeleteButton ()?

...