dom-如果条件为假时元素不隐藏

Question

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

Answer 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对我来说也没有多大意义。网格通过 DataProvider（通过 setItems 或 setDataProvider）接收项目列表，渲染器仅处理这些项目以在 UI 中显示它们。如果可以避免，则不应在渲染器中创建新数据对象。

dom-如果条件为假时元素不隐藏

dom-if element not hiding when condition is false

vaadin

vaadin-flow

vaadin-grid