Jquery преобразовано в Javascript результаты в заголовке не определены? Как мне правильно конвертировать это?

Question

Я пытаюсь преобразовать jquery обратно в Javascript, но по какой-то причине говорится, что title не определено. Я не уверен, как правильно преобразовать его или что сделать, чтобы решить эту проблему.

Вот текущий jquery код

update: function (e) {
            var el = e.target;
            var $el = $(el);
            var val = $el.val().trim();

            if (!val) {
                this.destroy(e);
                return;
            }

            if ($el.data('abort')) {
                $el.data('abort', false);
            } else {
                this.todos[this.indexFromEl(el)].title = val;
            }

            this.render();
        },

Вот код из функции indexFromEl

indexFromEl: function (el) {
            var id = $(el).closest('li').data('id');
            var todos = this.todos;
            var i = todos.length;

            while (i--) {
                if (todos[i].id === id) {
                    return i;
                }
            }
        },

Итак, исходя из приведенного выше кода, я попытался преобразовать его сам, но не думаю, что сделал это правильно.

update: function (e) {
            var el = e.target;
    var val = el.value.trim();

            if (!val) {
                this.destroy(e);
                return;
            }

      if(val === 'abort') {
        return false;
      } else {
        return this.todos[this.indexFromEl(el)].title = val;
      }

            this.render();
        },

Как преобразовать первый блок кода от jquery до javascript? Кроме того, я не уверен, как редактировать первую строку в indexFromEl jquery код

Вот сценарий jquery

<script id="todo-template" type="text/x-handlebars-template">
            {{#this}}
            <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
                <div class="view">
                    <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
                    <label>{{title}}</label>
                    <button class="destroy"></button>
                </div>
                <input class="edit" value="{{title}}">
            </li>
        {{/this}}
        </script>

Answer 1

Поскольку идентификатор для каждого li устанавливается в разметке HTML, а не на jQuery:

<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
//                                            ^^^^^^^^^^^^^^^^

После того, как у вас есть ссылка на элемент в Javascript, все, что вам нужно сделать, это получить свойство id из набора данных, например:

li.dataset.id

. Для этого в вашей функции indexFromEl используйте:

const id = el.closest('li').dataset.id;

Или, если вы как использование деструктуризации, чтобы сделать вещи немного более DRY:

const { id } = el.closest('li').dataset;

Также обратите внимание, что было бы намного чище использовать findIndex, если вы хотите найти индекс в массиве:

indexFromEl: function (el) {
  const { id } = el.closest('li').dataset;
  return this.todos.findIndex(todo => todo.id === id);
}

(хотя приведенное выше вернет -1, если индекс не найден, вместо undefined, как это делает ваш текущий код, если это проблема)

Answer 2

В вашей версии запроса вы ничего не возвращали. Так зачем возвращать JavaScript версию?

Сначала попробуйте найти, что такое this.todos[this.indexFromEl(el)], используя instanceof

Если this.todos[this.indexFromEl(el)] равно Element, тогда вы можете установить (как вы присваиваете значение) атрибут title с помощью setAttribute()

Итак,

this.todos[this.indexFromEl(el)].setAttribute('title', val);