Привязка цикла
Связывание петли немного сложно. Мы должны реализовать привязку, которая принимает массив или observableArray и средство визуализации в качестве параметров. Средство визуализации отвечает за отображение каждого элемента в массиве. И всякий раз, когда изменяется observableArray, например, push, pop,…. мы должны прислушаться к этому изменению и обновить View. Давайте реализуем очень простую версию. Во-первых, мы просто перебираем массив и передаем каждый элемент в средство визуализации.
В этой функции мы очищаем innerHTML от rootNode, сохраняем ссылку на него и передаем в качестве параметра каждый раз, когда мы вызываем средство визуализации. Давайте протестируем наш код.
наблюдаемый массив
observableArray — это класс для просмотра массива. Он наследуется от наблюдаемого класса и имеет свои собственные методы, такие как add, removeAt. Здесь я использую наследование прототипов, включая вызов конструктора базового класса и установку цепочки прототипов.
Теперь у нас есть новый класс, производный от html.observable. Но нам нужно переопределить метод уведомления, потому что нам нужно информировать подписчиков иначе, чем в базовом классе. Поместите код внизу html.observableArray.
Реализовать методы add и removeAt
Эти методы вызывают методы уведомления и передают действие. Подписчики будут слушать это действие и соответствующим образом обновлять DOM. Позвольте прослушать действие в привязке цикла.
Во-первых, мы слушаем, чтобы добавить действие. Мы можем отображать дочерние элементы прямо в последней позиции родителя, если индекс равен длине массива. Тем не менее, это не общий путь. Мы должны отображать дочерние элементы в виртуальном узле DOM, а затем добавлять их в правильную позицию. Это немного сложно, но всего 8 строк кода.
Чтобы проверить, что мы сделали, мы отобразим все элементы cartItem. После этого мы добавим элемент в список, чтобы увидеть, будет ли он отображаться в правильной позиции.
Если «HTC Vive» был добавлен вверху списка, значит, мы сделали так много вещей. Осталось только одно, чтобы закончить привязку цикла, это remove действие. Давайте добавим его после действия add внутри привязки each.
Чтобы протестировать действие remove, добавьте функцию removeCartItem.
Обновите кнопку удаления, чтобы использовать функцию removeCartItem.
Теперь вы можете нажать кнопку «Удалить» и увидеть, что соответствующий элемент удален из списка.
Полный код нашего туториала здесь. Это немного логично, чем 200 LOC, потому что он включает в себя клиентский код помимо самой библиотеки.
