polymer - 我可以将函数用作条件属性吗

Question

在下面的代码中，我想使用一个函数作为条件属性:

<polymer-element name="test-element">
    <template>
        <select id="type_menu" on-change="{{ onSelected }}">
            <option value="0" disabled?="{{ isDisabled }}">Item 0</option>
            <option value="0" disabled?="{{ isDisabled }}">Item 1</option>
            <option value="0" disabled?="{{ isDisabled }}">Item 2</option>
        </select>
    </template>
    <script>
        Polymer('test-element', {
            onSelected: function(event, details, sender) {
                // do something here
            },
            isDisabled: function() {
                return false; // simplified here - it doesn't matter, it always returns true
            }
        }
    </script>
</polymer-element>

到目前为止，我还无法完成这项工作。我也尝试过使用 disabled?="{{ isDisabled() }}"。可以做到吗？如果不是，那么使用某种功能执行此操作的最佳方法是什么？将数据属性设置为 ready 可能会起作用，但看起来有点笨拙。

Answer 1

这是我如何解决它的示例:

<polymer-element name="test-element">
<template>
    <select id="type_menu" on-change="{{ onSelected }}">
        <option value="0" disabled?="{{ someData[0].val | isDisabled }}">Item 0</option>
        <option value="1" disabled?="{{ someData[1].val | isDisabled }}">Item 1</option>
        <option value="2" disabled?="{{ someData[2].val | isDisabled }}">Item 2</option>
    </select>
</template>
<script>
    Polymer('test-element', {
        ready: function() {
            // in this case, I'm just using read to put in some simple values to filter
            this.someData = [{
                    val = 0
                },{
                    val = 1
                },{
                    val = 2
             }];
        },
        onSelected: function(event, details, sender) {
            // do something here
        },
        isDisabled: function(val) {
            return val < 2;
        }
    }
</script>
</polymer-element>

这是一个非常简单的例子，但要点是:

条件属性绑定(bind) ( disabled? = {{ }} ) 需要一个值 ( {{ value }} ) 或一个值和一个由管道分隔的过滤器 ( {{ value | filter }} )。如果你给它一个函数作为值，我相信它会直接评估函数的真实性(不运行它) - 即 someFunctionName == true 而不是 someFunctionName() == true。在这种情况下， someFunctionName 将始终是真实的，因为它正在评估函数的存在(不是未定义或非空等)，而不是函数可能返回的值。

在修复中，我使用了一个过滤器，它被评估为一个函数返回(并传递了值)。如果在这里显示的修复中，我只包含该值，则第一个选项将被禁用，而其他选项将被启用(因为 0 是错误的)。但是，如果我将过滤器传递给它，则该函数可以根据其算法评估该值。

当您使用带有循环的内部模板来根据数据填充一些列表并且您想要动态设置禁用、选择(无论)时，这真的很有用。