Two-way binding does not work with Polymer and Webpack.

[HIRANO-Satoshi]

@RoguePanda, thank you for the great plugin.

Two-way binding does not work with Webpack. The following code acts like one-way binding.

    <paper-input value.two-way="firstName"></paper-input>

When we use Polymer with webpack, we have to use aurelia-webpack-plugin which is a template loader for webpack. We don't use aurelia-html-import-template-loader.

In that case the following code produces an error.

<link rel="import" href="/bower_components/paper-input/paper-input.html">
<template>

Unhandled rejection Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>

We needed to place all link tags inside the template tag. @EisenbergEffect wrote that I'm not sure how it worked with jspm. There's a strict guard in the codebase to ensure that html is wrapped with a template..

<template>
<link rel="import" href="/bower_components/paper-input/paper-input.html">

Could you fix code for bindings?

There is a quick workaround. As I put all loadings of the paper-input and tags requiring two-way binding in index.html, the two-way binding works.

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/paper-input/paper-input.html">

Here is an example: skeleton-navigation/skeleton-webpack.

[bnavetta]

It looks like Webpack itself doesn't support Polymer yet, based on
webpack/webpack#547. There's a polymer-loader for Webpack that might help.
If I recall correctly, not using aurelia-html-import-template-loader
appeared to work in some cases, but caused all sorts of things to break,
which is why using it was required. Unless something's changed with
Polymer, I don't think it'll work without a HTML import implementation.
On Thu, Jun 23, 2016 at 12:38 AM HIRANO Satoshi [email protected]
wrote:

@RoguePanda https://github.com/roguePanda, thank you for the great
plugin.

Two-way binding does not work with Webpack. The following code acts like
one-way binding.

<paper-input value.two-way="firstName"></paper-input>

When we use Polymer with webpack, we have to use aurelia-webpack-plugin
https://github.com/aurelia/webpack-plugin which is a template loader
for webpack. We don't use aurelia-html-import-template-loader.

In that case the following code produces an error.

Unhandled rejection Error: Template markup must be wrapped in a element e.g.

We needed to place all link tags inside the template tag.
@EisenbergEffect https://github.com/EisenbergEffect wrote that I'm not
sure how it worked with jspm. There's a strict guard in the codebase to
ensure that html is wrapped with a template.
aurelia/webpack-plugin#40.

Could you fix code for bindings?

There is a quick workaround. As I put all loadings of the paper-input
and tags requiring two-way binding in index.html, the two-way binding works.

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">

Here is an example: skeleton-navigation/skeleton-webpack
https://github.com/HIRANO-Satoshi/skeleton-navigation/tree/master/skeleton-webpack
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#18, or mute the
thread
https://github.com/notifications/unsubscribe/ABmvhLe-Bg0EJnX6rKLpyP12p11wVo5-ks5qOg3GgaJpZM4I8cmj
.

[HIRANO-Satoshi]

#3

[dpinart]

Hi

We're using polymer and webpackand it's working quite fine. The difference is that we're vulcanizing all required polymer widgets in a single bundle (polymer.html) that is firstly added in index.html, just after the import of webcomponentsjs. This way, we don't need to add any link in aurelia templates as all of them are already loaded by the bundle

[HIRANO-Satoshi]

Hi,

@dpinart Thanks for very valuable info. Your use of aurelia-polymer encourages us so much.

I'm testing the combination and worrying about issues such as the iron-selector issue #17.

[bnavetta]

@dpinart thanks! I'll add something to the README

[nogsantos]

Hello,

@HIRANO-Satoshi Today, I was having the same problem. In my case, to solve, I used bindable. I didn't want to import all the polymers in my index. And what i did to solve was..

In my view-model import @bindable

import { inject, bindable } from 'aurelia-framework';

then, declare the attributes

...
@bindable private username?: any;
@bindable private userpass?: any;
...

and in my method, i used something like

...
let login_data = {
      'username': this.username.value,
      'password': this.userpass.value
}
...    

In my View

I used

<paper-input is="iron-input" required auto-validate autofocus error-message="Informe o usu&aacute;rio" label="Usu&aacute;rio" id="$_username" value.two-way="username" ref="username"></paper-input>

Passing the same value in ref attribute.

I really don't know if is the best approach, I'm starting to using Aurelia just now, and that is the way i found to sove my problem, maybe, can help you or other too...

[hackily]

This may deserve its own thread, but I'm hoping one of you can help me with this.
How do I use aurelia-polymer with webpack?

On the documentation, I see that it asks for the user to use JSPM to install aurelia-polymer.

I've instead, used npm to install aurelia-polymer. I figured out that you're supposed to include "aurelia-polymer" as a resource in the package.json file

"aurelia": {
    "build": {
        "resources": [
            "aurelia-polymer"
        ]
    }
}

But now I'm getting errors loading the module aurelia-polymer/au-custom-attribute-select

:/

[bnavetta]

I'd guess that's because aurelia-polymer doesn't have the aurelia build configuration in its package.json, so the bundler doesn't know about the au-custom-attribute-select file (which would probably be another ticket)

[fragsalat]

@unkani I had a similar problem and it seem to work with adding au polymer to the bundle dependencies in the aurelia.json with these config

{
    "name": "aurelia-polymer",
    "path": "../node_modules/aurelia-polymer/dist/amd",
    "main": "index"
},