Binding to boolean attribute

Question

I'm trying to set up a binding to a boolean attribute of an element. I have a observable field im my application element:

  @observable bool test = false;

Now i want to bind it to an element that has a boolean attribute, like <input type="checkbox"> and display the current value of that element:

<input type="checkbox" checked="{{test}}">
Value is {{test}}
<template if="{{test}}">
   Toggle button is on
</template>

But if I check the checkbox nothing is happening. The testChanged method is not called:

  void testChanged(old) {
    print('Test $test');
  }

I can't recall it, but wasn't there a syntax containing a question mark for binding to booleans? I can't find any resources on this. I followed the example of Seth Ladd for binding to checkbox that uses the same syntax as I use.

My initial goal was to bind to the polymer-ui-toggle-button element from the polymer_ui_elements package, but it doesn't work either:

<polymer-ui-toggle-button value="{{test}}"></polymer-ui-toggle-button>
Value is {{test}}
<template if="{{test}}">
  Toggle button is on
</template>

I don't get an exception in this case, but the binding isn't working. The button itself is working fine and changes his state on toggle. I can see in the inspector that the value attribtue is toggled correctly.

Does anybody is already using a binding to a boolean and can point me to the right route or knows about issues?

Update: Here is my example source.

My Dart version: Dart Editor version 1.0.2_r30821 (DEV) Dart SDK version 1.0.2.1_r30821

when the checkbox is ticked, it'll get a value of "checked" not "true" as Dart would be expecting. Is that not it? — Paul Collingwood
My mistake, I will update the question, the exeception goes away but it isn't working — Fox32
Is the HTML you provided inside a custom elements template element? — Günter Zöchbauer
downloaded your code and it works fine (checkbox and polymer-ui-toggle-button) and I find it weird to make the toggle-botton switch without clicking it - never tried that :-) I just saw, that the checkbox doesn't switch when I click the toggle button :( — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2013-12-07T12:09:39

3

votes

The last time I tried it worked this way

checked?="{{isChecked}}"

Binding to boolean attribute

1 Answers