Search code examples
dartdart-polymer

Binding to boolean attribute


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


Solution

  • The last time I tried it worked this way

    checked?="{{isChecked}}"