当条件为假时，dom-if 元素不隐藏答案

【问题标题】：dom-if element not hiding when condition is false当条件为假时，dom-if 元素不隐藏
【发布时间】：2021-12-09 00:11:18
【问题描述】：

我想在网格中显示不同的元素。根据元素的类型，我想使用不同的 TemplateRenderer。这个问题的一种解决方案是在模板中使用 dom-if 元素。如果 «if» 参数为假，则不应渲染该元素。问题是，在我的模板中，所有元素都被渲染，即使调试器向我显示负责确定真值的方法有时返回 false。

every template gets rendered twice

这是我的网格代码：

// these are the two javascript templates
@JsModule("./src/views/parts/card/graphics-card-card.js")
@JsModule("./src/views/parts/card/memory-card.js")
public class PcPartsDomIfGrid extends Grid<AbstractPcPart> {
    private static final long serialVersionUID = 7474489703766322949L;

    public PcPartsDomIfGrid() {
        super();

        initColumn();
    }

    private boolean isMemory(AbstractPcPart pcPart) {
        return pcPart.getClass().equals(Memory.class);
    }

    private boolean isGraphicsCard(AbstractPcPart pcPart) {
        return pcPart.getClass().equals(GraphicsCard.class);
    }

    private void initColumn() {
        addColumn(Objects.requireNonNull(CardFactory.getTemplate())
                .withProperty("partCard", CardFactory::create)
                .withProperty("isMemory", this::isMemory)
                .withProperty("isGraphicsCard", this::isGraphicsCard));
    }
}

这是工厂的代码：

public class CardFactory {
    public static AbstractPcPartCard create(AbstractPcPart pcPart) {
        if (pcPart.getClass().equals(GraphicsCard.class)) {
            return GraphicsCardCard.create((GraphicsCard) pcPart);
        } else if (pcPart.getClass().equals(Memory.class)) {
            return MemoryCard.create((Memory) pcPart);
        } else {
            // different PC parts
            return null;
        }
    }

    public static TemplateRenderer<AbstractPcPart> getTemplate() {
        String memoryTemplate = MemoryCard.getTemplateString();
        String graphicsCardTemplate = GraphicsCardCard.getTemplateString();

        String combinedTemplate = memoryTemplate + graphicsCardTemplate;
        return TemplateRenderer.of(combinedTemplate);
    }
}

MemoryCard 和 GraphicsCardCard 类似，这里是 MemoryCard 的代码：

public class MemoryCard extends AbstractPcPartCard {
    Memory pcPart;

    public MemoryCard(Memory pcPart) {
        this.pcPart = pcPart;
    }

    public static MemoryCard create(Memory pcPart) {
        return new MemoryCard(pcPart);
    }

    // getters

    public static String getTemplateString() {
        return "<memory-card is='dom-if' if='[[item.isMemory]]'"
                + " part-card='[[item.partCard]]'>"
                + "</memory-card>";
    }
}

完整的代码可以在github 上找到。相关视图位于包中：

com.example.application.ui.views.partsDomIf

【问题讨论】：

标签： vaadin vaadin-flow vaadin-grid

【解决方案1】：

dom-if 属性必须用在<template> 标记上，例如

<template is='dom-if' if='[[item.important]]'>this is shown when the item is <b>important</b></template>
<template is='dom-if' if='[[!item.important]]'>this is shown when the item is <b>NOT important</b></template>

请注意，!property.name 否定是唯一可用的逻辑操作，您不能使用例如比较器。

使用工厂方法CardFactory::create 的模式对我来说也没有多大意义。 Grid 通过 DataProvider（通过 setItems 或 setDataProvider）接收项目列表，而 Renderer 只处理这些项目以在 UI 中显示它们。如果可以避免，则不应在渲染器中创建新的数据对象。

【讨论】：