readonly.bind does not work.

[HIRANO-Satoshi]

In the following code readonly does not work. editing is a boolean variable in a view model.

      <paper-input value.two-way="entity.name" readonly.bind="!editing">

The following code works well. input switches readonly and writable according to the editing variable.

      <input value.two-way="entity.name" readonly.bind="!editing">

I use JSPM for testing.

[dpinart]

Hi @HIRANO-Satoshi

There are several things that do not work as expected about binding polymer widgets with aurelia. we have had to create several behaviors (aurelia custom attributes) that extend this plugin and make life easier.

For the readonly.bind we have a custom attribute as follows
//custom-readonly.ts

import {customAttribute} from "aurelia-templating";
import {autoinject} from "aurelia-dependency-injection";
import {bindable} from "aurelia-templating";

@customAttribute('custom-readonly')
@autoinject
export class CustomReadonly{
  @bindable readOnly: boolean;

  constructor(private _element: Element){}

  readOnlyChanged(newValue){
    (<any>this._element).readonly = this.readOnly;
  }
}

Now in your view you just need:

<template>
<require from="./custom-readonly"></require>
<paper-input value.two-way="entity.name" custom-readonly="read-only.one-time:  !editing">

</template>

Thats all!

PS: I'm not sure but I thing as custom-readnly behavior has only one property you can just use

 <paper-input value.two-way="entity.name" custom-readonly.bind="!editing">

Let me know if this works too

PS2: We have other similar behaviors for max-length, min-length,...

[HIRANO-Satoshi]

@dpinart Thanks so much for taking much time.

Actually, I have the same one for readonly.

Are you going for production with aurelia-polymer? Have you had a site with the combination?

I haven't figure out how many issues are hidden. Could you make a new issue or issues that lists all your findings?

I have noticed an active color remains on paper-menus sometimes.

[dpinart]

Hi @HIRANO-Satoshi

It's true that integration with polymer is being a bit harder that I expected, bindings issues are just minor ones that can be solved with custom attributes. The harder thing about polymer and aurelia integration is about populating dynamically 'list' polymer widgets like toolbar, menu... In issue #17 you'll find a couple of workarounds that can be helpful

Once said that, I'm quite happy with aurelia-polymer and we're already on production MobileYourself

PS: type doctor/doctor.
PS2: Is not working currently on edge
PS3: We're getting rid of webpack and getting back to jspm/systemjs while waiting for aurelia-cli/requirejs

[HIRANO-Satoshi]

@dpinart Cool!! We are impressed. Congratulations.

It's quality seems very high. I decided to go with aurelia-polymer.

I have started playing with your dynamic template generation in #17. I need a bit more time to run it.

[HIRANO-Satoshi]

And, very good coloring.

[dpinart]

@HIRANO-Satoshi thanks a lot. Do not hesitate to ask me whatever you think I can be useful.
As said before, we're now getting back to jspm/systemjs, it allows more flexibility and it's easier to configure bundles in order to improve first load time. I find webpack it's too dense:)

[HIRANO-Satoshi]

@dpinart Thanks. I will ask you.

@RoguePanda Have you seen the site? Your efforts are bearing fruits.

[bnavetta]

Sorry about all the delays - I've been busier than expected with work. @dpinart do you think those behaviors are something that would make sense to include in the plugin? I've been meaning to work out some way to have more customizable events and attribute configuration, and it sounds like you have a good start on it. Unfortunately, I think webpack and HTML imports might be somewhat philosophically at odds with each other, since they both try to be complete import/module systems. As for template generation, I think the core of that is the Polymer bug I mentioned in #17. Doesn't look like there's been much progress on it, but it'll hopefully clear up a lot of these issues

[HIRANO-Satoshi]

I guess attributes specified in attribute-map.js have this issue.

https://github.com/davismj/templating-binding/blob/master/src/attribute-map.js

    this.registerUniversal('accesskey', 'accessKey');
    this.registerUniversal('contenteditable', 'contentEditable');
    this.registerUniversal('tabindex', 'tabIndex');
    this.registerUniversal('textcontent', 'textContent');
    this.registerUniversal('innerhtml', 'innerHTML');
    this.registerUniversal('scrolltop', 'scrollTop');
    this.registerUniversal('scrollleft', 'scrollLeft');
    this.registerUniversal('readonly', 'readOnly');

    this.register('label', 'for', 'htmlFor');

    this.register('input', 'maxlength', 'maxLength');
    this.register('input', 'minlength', 'minLength');
    this.register('input', 'formaction', 'formAction');
    this.register('input', 'formenctype', 'formEncType');
    this.register('input', 'formmethod', 'formMethod');
    this.register('input', 'formnovalidate', 'formNoValidate');
    this.register('input', 'formtarget', 'formTarget');

    this.register('td', 'rowspan', 'rowSpan');
    this.register('td', 'colspan', 'colSpan');
    this.register('th', 'rowspan', 'rowSpan');
    this.register('th', 'colspan', 'colSpan');