Data binding using Javascript

[stefanoantonel]

Hi guys!!!
I'm trying to create an instance of service-detail element with javascript inside service-section element.
I've already imported service-detail in elements.html.
For example:
In service-section element:

showDetails: function(e) {
   var detail = document.createElement('service-detail');
   detail.lang = this.lang;
   detail.services = this.services;
}

The problem is that if the property lang in service-section changes, this change is not propagated to the service-detail element.

On the other hand, if I use inside the service-section element the tag:

<service-detail lang="{{lang}}" services="{{services}}"></service-detail>

When I change the value of the lang in service-section it also change in the service-detail . (As it's suppose to work).

Now the question is, How can I do to bind properties using Javascript and creating the elements dynamically?

Thank you everyone for do the best!

[bedeoverend]

Hey @stefanoantonel, looks like this might be a duplicate of #1796 and #2638? Those discussions might give you an idea of where imperative data binding is at.

[dfreedm]

@bedeoverend agreed, seems like a dupe of #1796 or #2368, which need to be deduped together at some point.

[kaste]

I proposed #3460. I used something like this and if I did not messed up the PR this enables something like this:

showDetails: function(e) {
   var detail = document.createElement('service-detail');
   this.addCustomEffect('lang', function(path, value, oldValue) {
      detail['lang'] = value;
   };
}

[stefanoantonel]

@kaste Thank you for your proposal !

[kaste]

Unfortunately the Holy Grail does not answer. 😯

stefanoantonel [email protected] schrieb am Di., 1. März 2016
14:37:

@kaste https://github.com/kaste Thank you for your proposal !

—
Reply to this email directly or view it on GitHub
#3420 (comment).