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

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()}}".它可以完成吗？如果没有,用某种功能做到这一点的最佳方法是什么？准备好数据属性可能会起作用但看起来有点笨拙.

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>

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

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

在修复中，我使用了一个过滤器，它被评估为函数返回（并传递值）。如果在此处所示的修复中，我仅包含该值，则第一个选项将被禁用，而其他选项将被启用（因为 0 为 false）。但是，如果我将过滤器传递给它，该函数可以根据其算法评估该值。

当您使用带有循环的内部模板来根据数据填充某些列表并且您想要动态设置禁用、选择（无论什么）时，这确实变得有用。