HTML模板渲染 - 奇怪的行为

Question

请参阅Inventory-Bananza上Chris Johnson（@johnsoct）的笔CodePen。

我遇到的问题出在这行代码中：

// Item's inventory state: in stock || order
console.log(container);
if (item.numLeft <= 100) container.classList.add('bg-order');

我尝试将某些模板容器渲染为红色（如果它们低于某个.numLeft,但是一旦找到低于阈值的第一个item.numLeft（100），则以下所有容器都是红色的。我不确定我是否不了解模板的工作原理，或者在迭代项目时我做错了什么。

Answer 1

正在渲染的元素是最后一个元素的克隆。因此，如果是＆gt;则必须删除该类。 100，这可以通过添加else语句来完成：

// Item's inventory state: in stock || order
console.log(container);
if (item.numLeft <= 100) {
    container.classList.add('bg-order'); 
} else { 
    container.classList.remove('bg-order');
}