binding,polymer,web-component,observers,polymer-1.0 , Data binding in a dynamically inserted polymer element


Data binding in a dynamically inserted polymer element

Question:

Tag: binding,polymer,web-component,observers,polymer-1.0

There're some times when we could need adding a custom element dynamically into a context. Then:

I have created an example for 0.5 and just the same for 1.0. See below the code of the polymer that it makes the injection. Also you can see the full plunker examples for clarity.

Ej 0.5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

Please, see the full plunkr example: http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element");
      // FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo"));
      this.$.dynamic.appendChild(el);
    }
  });
</script>

Please, see the full plunkr example: http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Do you know some workaround or equivalent with polymer 1.0?


Answer:

Right now, there is no direct way to do it. You should manually do the double binding by listening to changes in the foo property of the parent element and listening to the foo-changed event of the programmatically created element.

<script>   
Polymer({
  is: "main-context",
  properties: {
    foo: {
      type: String,
      observer: 'fooChanged'
    }
  },
  ready: function() {
    var self = this;
    var el = this.$.el = document.createElement("another-element");

    //set the initial value of child's foo property
    el.foo = this.foo;
    //listen to foo-changed event to sync with parent's foo property
    el.addEventListener("foo-changed", function(ev){
      self.foo = this.foo;
    });

    this.$.dynamic.appendChild(el);
  },
  //sync changes in parent's foo property with child's foo property
  fooChanged: function(newValue) {
    if (this.$.el) {
      this.$.el.foo = newValue;
    }
  }
});
</script>

You can see a working example here: http://plnkr.co/edit/mZd7BNTvXlqJdJ5xSq0o?p=preview


Related:


How to use Polymer template auto-binding in Polymer1.0?


html,css,html5,polymer,polymer-1.0
Polymer doesn't provide much detailed documentation as now. So I am wondering how to use the template auto-binding feature. Previously with polymer 0.5 <template is=auto-binding> would work. But doesnt work any more with Polymer 1.0. My use-case is not building custom elements using Polymer instead build a web app using...

tkinter: bind Return key to the OK button — but not to the Text widget


python,binding,tkinter
With tkinter/ttk (8.5+), in a custom dialog, I want to bind the Return key to the OK button. So I use the standard instruction: self.window.bind("<Return>", self.on_ok) The problem is, in this custom dialog there is also a (multiline) Text widget. And once the Return key is bound to the OK...

Polymer 1.0 strange behaviour on properties


polymer
I'm just learning polymer (1.0) so please bear with me. I'm using express.js to return some array of JSON.stringified items and for-each them, so the result is as follows (in HTML): <fighter-profile fighter="{&quot;country&quot;:&quot;USA&quot;,&quot;countryFullName&quot;:&quot;United States&quot;,&quot;name&quot;:&quot;Frank...

Inheritance of customized polymer element in version 1.0


polymer,polymer-1.0
I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0. It starts here: <div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeIsSingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeIsGrouped}}'>...

Polymer 1.0 app-theme only affecting index.html and not on custom elements


css,polymer
I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for...

Icon list for Polymer


html,polymer
The polymer starter kit makes references to <iron-icon> to implement icons. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing. Is there any other reference of all the icons in the <iron-icon>...

Change style programmatically


polymer,polymer-1.0
I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color,...

Why does the polymer property binding need a tag in my template?


javascript,html,polymer
I am trying to understand how Polymer renders properties in the template of a custom element. I'm seeing some behavior that I can't explain, where some properties are being rendered in one case (when surrounded by tags), but not in another (when tags are not present in the template). To...

Polymer 1.0 data binding not working


data,binding,polymer
I have the following polymer element: The value of navigator.currentStep is not updating after someMethod is called. <dom-module id="m"> <template> Navigator step = <span>{{navigator.currentStep}}</span> </template> </dom-module> Polymer({ is: 'm', ready: function() { this.navigator = new Navigator(1); console.log(this.navigator.currentStep); // 1 }, someMethod: function() { this.navigator.next(); console.log(this.navigator.currentStep); // 2 } }); Output...

WPF: static INotifyPropertyChanged event


wpf,binding
This is my model: class Person : INotifyPropertyChanged { public static int Counter; public string _firstName; public string _lastName; public event PropertyChangedEventHandler PropertyChanged; public string FirstName { get {return _firstname; } set { _fileName = value; NotifyPropertyChange("FirstName"); } } public AddPerson(Person person) { Counter++; } } I have this NotifyPropertyChange...

Click event not firing in polymer paper-icon-button


javascript,polymer
I have the following page defined <!DOCTYPE html> <html> <head> <title>Practice List</title> <link rel="import" href="elements/elements.html" /> <link rel="stylesheet" type="text/css" href="Styles/styles.css" /> <!-- google fonts definitions --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> </head> <body unresolved...

polymer 1.0 data binding not working as expected


javascript,php,arrays,json,polymer
I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element: system-menu.html <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> <dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() {...

BooleanToVisibilityConverter works on Textblock and not on UserControl


wpf,xaml,binding,windows-phone-8.1
I'm working on a windows phone project. There is something i don't really understand about my xaml. Here it is: <Page x:Class="CitiBox.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:converters="using:CitiBox.Converters" xmlns:views="using:CitiBox.Views" mc:Ignorable="d" Background="{ThemeResource...

Getting response but view is not updating - AngularJS


angularjs,rest,view,binding
I am trying to get the response from a url and populate in the view, but I am do not see the view getting updated. Help me to resolve this issue. Thanks Source <!DOCTYPE html> <html ng-app="myModule"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head> <body ng-init="priceList='promo03'"> <div ng-controller="PricingController" > <div ng-repeat="item in finalList...

How do I use dom-repeat in Polymer binding to a dictionary


polymer
I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

Using Polymer iron-ajax in repeating template


polymer
How do I load a json file and use the data in a repeating template? This code doesn't produce anything: <dom-module id="name-list"> <template> <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> <template is="dom-repeat" items="{{data}}"> <div>First name: <span>{{item.firstName}}</span></div> <div>Last name: <span>{{item.lastName}}</span></div> </template> </template> </dom-module> <script> Polymer({...

Polymer Data-Binding will not replace


javascript,polymer,web-component
I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

Polymer 1.0 in Ember-cli, wrong appearance


javascript,ember.js,polymer,frontend,ember-cli
I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

How can I access item in parent repeat template while in filter


javascript,html,templates,polymer
<iron-pages> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="isThisFruitInTheRightCategory"> <!-- Some more stuff --> <span>{{fruit.weight}}</span> <span>{{fruit.age}}</span> <!-- ... --> </template> </div> </template> </iron-pages> isThisFruitInTheRightCategory: function(fruit){ return fruit.category === /* Q: How do I get the current category? */ } Suppose I...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event


dart,polymer,dart-polymer
Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...

Change ImageBrush Imagesource programmaticaly with conditions (WPF)


c#,wpf,binding,imagesource,imagebrush
maybe that question was asked 100 times but can you help please I searched everywhere but can't find a normal answer. I got such xaml <Window x:Class="Imagebind.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="#FF3F3B51"> <Window.Resources> <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle"> <Setter.Value> <Style>...

MvvmCross RaisePropertyChanged and dot (.) binding


c#,binding,xamarin,mvvmcross
I have a custom binding that accepts entire view model: public class TextViewGroupInfoBinding : BaseBinding<TextView, GroupViewModel> { private IMvxAndroidCurrentTopActivity CurrentTopActivity { get { return ServiceLocator.Current.GetInstance<IMvxAndroidCurrentTopActivity>(); } } public TextViewGroupInfoBinding(TextView androidControl) : base(androidControl) { } public override MvxBindingMode DefaultMode { get { return MvxBindingMode.OneWay; } } protected override void SetValueToView(TextView control,...

How do I provide a collection of elements to a custom attached property?


c#,wpf,binding
I found a few examples online, and a few questions and answers here, but I just can't get it to work. I need a custom attached property that can take one or more target elements. For example... <ListView> <dd:MyDragDrop.DropBorders> <Binding ElementName="brdOne"/> <Binding ElementName="brdTwo"/> <Binding ElementName="brdThree"/> </dd:MyDragDrop.DropBorders> </ListView> I've also had...

WPF Binding - Bind to A when X is checked, else bind to B


c#,wpf,binding
Basically I have a TextBlock which displays the Microphone Gain. <TextBlock FontFamily="Calibri Light" FontSize="20" Foreground="#FFF65B60" FontWeight="Bold" Height="35"><Run Text="{Binding AudioRecorder.Gain, StringFormat={}Microphone Gain: {0:#} %}"/></TextBlock> As you can see, this is bound to "AudioRecorder.Gain" however I only want to bind to that value if this checkbox is NOT checked. <CheckBox IsChecked="{Binding Recognizer.AutoGainControl}"...

How to Bind Attribute from Custom Polymer Element to angularjs


javascript,angularjs,polymer
I created a custom element called my-slider-input which computes values from a user input. I need to take use these values in an angular controller. I'm wondering what's the best practice to do this? Given this polymer element: <dom-module id="my-slider-input"> <style> :host { display: block; } </style> <template> <button id="input1">Input...

Bind Control to Two properties


wpf,binding
Using MVVM pattern and WPF, I would like to bind my controls to two properties. Let's say I have a label that is bind to property on VM1 and I would like to bind it as well to the property on VM2 to send received value from VM1 to VM2....

Dropshadow from paper-toolbar overlays paper-dialog


css,polymer,polymer-1.0
I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

Polymer 1.0 services issue


polymer,web-component
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...

How to notify page transition with iron-pages


polymer,polymer-1.0
I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the...

How to not update a model until form submission in Angular?


javascript,angularjs,forms,binding
I'm looking for Angular to not update the model until the user submits the form. Or, in another way, to update the model only when the user has submitted the form. <form ng-submit="process()"> Value is : {{ model.property }} <input type="text" ng-model="model.property"> <button type="submit">Submit</button> </form> I was thinking of something...

Binding imperatively


binding,polymer
Is there a way to set up bindings imperatively. An example use case: var el2 = new MyElement(); el2.myProp = this.$.anotherElement.anotherProp That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like: el2.myProp.bindTo(this.$.anotherElement.anotherProp) Possible?...

google-signin don't return user info


polymer,web-component,google-signin,google-web-component
I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

Change google-map center using Polymer


polymer
I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me? <dom-module id="my-map"> <template> <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"> </google-map> </template> <script> Polymer({ is: "my-map" // I want to change map center here...

Polymer dom-repeat and displaying result of iron-ajax call


javascript,json,polymer
I have a feed of GP Practice addresses the start of which is as follows (not the whole feed which is over 16000 entries - still got to figure out paging) [{"Address1":"73 UPPER WICKHAM LANE","Address2":"WELLING","Address3":"KENT","Address4":"","Address5":"","CloseDate":"\/Date(-62135596800000+0000)\/","ContactName":"","ContactTelephone":"020 88541910","EmailAddress":"","LastUpdatedDate":"\/Date(1434749040000+0100)\/","Name":"(GPSI) DR AC...

How can I express the type of 'takeWhile for vectors'?


haskell,types,binding,dependent-type
Haskell beginner here. I've defined the following types: data Nat = Z | S Nat data Vector a n where Nil :: Vector a Z (:-) :: a -> Vector a n -> Vector a (S n) infixl 5 :- I'm trying to write the function, takeWhileVector which behaves the...

Using dom-if for conditionals in arrays


polymer,polymer-1.0
In 0.5 I could use the expressions in the dom-if to select for certain things in arrays while looping through them. How could I achieve the same effect in 1.0?

polymer databinding performence


polymer,btle
I am trying to make an app that reads data from a device over btle and displays this data in a streaming graph. I want to do this with use of polymer. It would be nice to shield the complexity of btle. To have a html tag for btle that...

Polymer 1.0: Two-way bindings with input elements


javascript,polymer,custom-element
Code Consider the following Polymer custom element: <dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>Reset</button> </template> <script> Polymer({ is: 'test-element', properties: { 'value': { type: String, reflectToAttribute: true, notify: true, value: null } } }); </script> </dom-module> I use this custom element in my index.html as follows: <html> <head> <script type="text/javascript"...

Having trouble applying a mixin in Polymer


html,css,polymer,polymer-1.0
I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong? story-card.html <dom-module id="story-card"> <style> :host { display: block; box-sizing: border-box; } #story-card { min-height: 5em; max-width: 45%; margin-left: auto; margin-right: auto; padding:...

Binding property of usercontrol to data


c#,xaml,mvvm,binding,winrt-xaml
I'm not sure of the correct terminology to use. I created a Windows Store app about a year ago and the main page was created by Visual Studio and I never changed it much. It uses a view model that works fine but I don't know enough to fix problems....

Set focus for paper-input via radio button


input,radio-button,focus,polymer,paper-elements
In Polymer (1.0), how can I set the focus of the iron-input when (as example) radiobutton 'radio1' is selected. <div> <div>Title:</div> <paper-radio-group> <paper-radio-button name="radio1">Radio1Label</paper-radio-button> <paper-radio-button name="radio2">Radio2Label</paper-radio-button> </paper-radio-group> <paper-input-container> <input is="iron-input"> </paper-input-container> </div> ...

core-animated-pages in Polymer 1.0


polymer,web-component,polymer-1.0
I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

How to style Polymer's toolbar background in 0.5?


polymer,toolbar
I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar? Below...

Computed binding doesn't work with on-click (Polymer)


javascript,html,polymer
<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

How can i make this CommandParameter work?


c#,wpf,xaml,binding,commandparameter
I've been learning WPF in college this semester but there are still some things I do not fully understand. I have the following code: <UserControl x:Class="Reversi.SquareControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="48" d:DesignWidth="48"> <Button Command="{Binding Place}"...

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


firefox,dart,polymer
I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/ DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

dom-if doesn't get updated in dom-repeat


javascript,html,templates,polymer,polymer-1.0
<template is="dom-repeat" items="{{fruit_list}}" as="fruit"> <template is="dom-if" if="{{fruit.isOrange}}"> I'm an orange! </template> </template> Here I have a dom-if template inside a dom-repeat template. It works great if the value of fruit.isOrange has already been finalized. However if not, for example, it was true when before but now I change it to...

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key


event-handling,polymer,web-component
I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...