JS方法未定義

Question

我想在 polymer 模板中使用 java 腳本方法。 我正在使用帶有 Polymer 元素的 Vaadin。 在我的項目中，我有一個可以是不同類型的對象的 Vaadin-Grid。 我想用不同的模板渲染這些類型。 可以使用 dom-if 模板解決此問題，如ollitietavainen在此答案中所述

這完美地工作，但有一個問題。 在網格中使用兩種以上不同類型的對象時，需要使用相同數量的布爾值來設置它。 假設我們有一個展示 PC-Parts 的虛構商店，並且每種類型的 PC-Part 都需要使用自己的模板進行渲染，那么我們將需要類似休閑的東西。 這是相當麻煩的。

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

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

private boolean isCPU(AbstractPcPart pcPart) {
    return pcPart.getClass().equals(CPU.class);
}

// … is-checker for all other types of pcParts.

private void initColumn() {
    addColumn(Objects.requireNonNull(CardFactory.getTemplate())
            .withProperty("partCard", CardFactory::create)
            .withProperty("isMemory", this::isMemory)
            .withProperty("isGraphicsCard", this::isGraphicsCard)
            .withProperty("isCPU", this::isCPU)
            // add all other properties
            );
}

相應的模板看起來像這樣。

<template is='dom-if' if='[[item.isMemory]]'>"
    <memory-card part-card='[[item.partCard]]'>
    </memory-card>"
</template>
<template is='dom-if' if='[[item.isGraphicsCard]]'>"
    <graphics-card part-card='[[item.partCard]]'>
    </graphics-card-card>"
</template>
<template is='dom-if' if='[[item.isCPU]]'>"
    <cpu-card part-card='[[item.partCard]]'>
    </cpu-card>"
</template>
<!-- one additional template for every type of part -->

現在的問題是，如果有任何其他方式，那將不需要所有這些屬性。

幸運的是，正如Kuba Šimonovský在回答另一個問題時所解釋的那樣。

使用這種方法，我們可以將上面的代碼重寫為類似休閑的代碼。

private String type(AbstractPcPart pcPart) {
    return pcPart.getClass().getSimpleName();
}

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

這次我們使用java-script方法有條件地select對應的模板。

<template is='dom-if' if='[[_isEqualTo(item.type, "Memory")]]'>"
    <memory-card part-card='[[item.partCard]]'>
    </memory-card>"
</template>
<template is='dom-if' if='[[_isEqualTo(item.type, "GraphicsCard")]]'>"
    <graphics-card part-card='[[item.partCard]]'>
    </graphics-card-card>"
</template>
<template is='dom-if' if='[[_isEqualTo(item.type, "CPU")]]'>"
    <cpu-card part-card='[[item.partCard]]'>
    </cpu-card>"
</template>
<!-- one additional template for every type of part -->

Polymer 模板現在有點復雜，但在 java 方面，代碼要短得多，並且可能更容易維護。 可能仍然有一些開銷，因為每個模板都被添加到 dom 中。 但除此之外，只有我們希望看到的模板中的內容被添加到 dom 中。

我不認為有更好的方法來做到這一點。

所以使用這個方法，我們需要一個名為_isEqualTo 的java-script 方法。 這個方法不是標准方法，所以我們需要自己實現。 這種方法的實現很簡單。

function _isEqualTo(one, other) {
    return one == other;
}

但是來自 Kuba 的回答並沒有具體說明在哪里實現這個方法。 我試圖將方法放在不同的地方，但沒有運氣。 我瀏覽器中的js控制台總是抱怨找不到方法。

挖掘得更深一點，我發現了這個Link 。 所以也許我想要的是一個全局變量。

window._isEqualTo = function(one, other) {
    return one == other;
}

但即使有這種變化，同樣的警告仍然存在。 奇怪的是 function 在開發者工具的交互式控制台中是可見的。 在我添加了 function 的 java 腳本文件中設置斷點； 並在控制台中調用 function 表明它確實是正確的 function 被調用，這讓我相信 function 在應用程序的生命周期中初始化得太晚了。 雖然我完全不確定。

並且因為沒有找到 function，所以視圖中的網格會是空的。 它仍然顯示行，但它們不顯示內容。

我真的希望有人可以幫助我。 這是一個 Git-Repository 來重現我的問題。 相關的視圖是 PartsDomIfView 和 PartsDomIfElegantView。

Answer 1

您可以創建一個 LitRenderer (v22+) 並創建一個自定義的 lit 組件，而不是使用已棄用的 TemplateRenderer，該組件可用作列的內容。 在那里，您可以創建基於復雜邏輯的模板作為單獨的組件，這樣可以更好地維護。