Can I use a function as a conditional attribute - polymer

Question

In the following code, I want to use a function as a condition attribute:
<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>
So far, I have not been able to make this work. I have tried using disabled?="{{ isDisabled() }}" also. Can it be done at all? If not, what is the best way to do this with some kind of function? Setting a data property on ready might work but it seems a bit unwieldy.

Answer 1

Here is an example of how I solved it:
<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>
This is a very simple example, but the gist is this:
The conditional attribute binding ( disabled? = {{ }} ) expects a value ( {{ value }} ) or a value and a filter separated by a pipe ( {{ value | filter }} ). If you give it a function as the value, I believe it evaluates the truthiness of the function directly (does not run it) - ie someFunctionName == true as opposed to someFunctionName() == true. In that context, someFunctionName will always be truthy because it's evaluating the existence of the function (not undefined or not null, etc.) as opposed to a value the function might return.
In the fix, I'm using a filter, which IS evaluated as a function return (and is passed the value). If, in the fix shown here, I were only to include the value, the first option would be disabled and the others would be enabled (because 0 is falsey). If I pass it the filter, though, the function can evaluate the value based upon its algorithm.
This really becomes useful when you're using an inner template with a loop to populate some list based upon data and you want to set disabled, selected, (whatever) dynamically.