Is there a procedure to call an "init" method on a polymer element in Dart in order to populate it?
I have a polymer template (still not sure it's correct) and I want to populate it with the results of an HttpRequest. I can populate with a static list, but not sure how to populate it with a dynamic list made via an http call.
Are there examples anywhere?
I'm still trying to come up to speed on Dart and Polymer ...
My hacks are at https://gist.github.com/fils/6270699
Have you considered putting the init code inside a created() lifecycle method? You can see an example of that at https://github.com/dart-lang/web-ui/blob/polymer/example/todomvc/web/todo_row.dart
Related
In AngularDart I used to extend ShadowRootAware and AttachAware to query the document with shadowRoot.querySelector(...).
Now it seems that those classes are gone. How can I query the DOM, and how do I execute some code in the "attach" phase?
I found
var shadowRoot = DOM.getShadowRoot(host);
shadowRoot should allow you to call querySelector()
Not tried myself yet though.
Once again, a Dart/Polymer related question.
I wanted to use the Parse.com JavaScript library, but since it's not available in Dart I've written Wrapper classes which store a JsObject and delegate all calls from Dart to the corresponding JavaScript object. Basically it's like a proxy.
Guess what, it works pretty great.
However, my observables don't. To understand this, you have to take a look at the following structure of one of my "proxy"-classes.
class ParseObject extends Observable {
JsObject _jsDelegate = new JsObject(context['Parse']['ParseObject']);
void set(String key, dynamic value) {
_jsDelegate.callMethod('set', [key, jsify(value)];
}
dynamic get(String key) {
return dartify(_jsDelegate.callMethod('get', [key]));
}
}
The HTML code of my Polymer Element looks like this:
<div>Name: {{project.get('name')}}</div>
Since the data binding is only evaluate in case the parameter of the method changed, it will never be updated and thus even though the name is changed, the old one will stay in place.
The solution I came up with is to store all the values the user is setting in the ParseObject#set(String, dynamic) method into a Map which is observable. This works but I think it's quiete dirty since I have to make sure that both Maps, the one in Dart and the one in the ParseObject's JavaScript representation equal.
Thus I am looking for a better solution and I think of some kind of method to tell Polymer to reevaluate it's data bindings.
Does such a method exist or are there any other possibilities to address this problem?
Extending observable by itself does nothing yet.
You need to annotate the getters with #observable (and if you are not using Polymer, you also need to add the observable transformer to pubspec.yaml). You can't make functions observable (this works in Polymer elements but not in Observable model classes. For more details about observable see for example Implement an Observer pattern in Dart or Dart: #observable of getters
I am trying to pass an object reference to the Dart script associated with a Polymer element. I have found the element in the DOM but I can't figure out how to call a method in the Dart associated with the element or any other way to dynamically pass an object to the Polymer element to be displayed.
Basically you just get a reference by using for example querySelector('#someid') and just assign the value to a field or setter or call a method and pass it as an argument.
querySelector('#someid').someField = someValue;
querySelector('#someid').setValue(someValue);
This might produce a hint in DartEditor but should still work when the code is executed. To get rid of the hint you can "cast" like
(querySelector('#someid') as MyComponent).someField = someValue;
querySelector('#someid') as MyComponent).setValue(someValue);
You need to import MyComponent to make this work.
If this doesn't something with your code might be wrong. For example the main() method if you have one. See how to implement a main function in polymer apps for more details.
If nothing of the above works, please add code to your question that shows what you're trying to accomplish.
I have a custom polymer-element, "my-app" which uses template if="..." constructs to conditionally include other polymer elements.
All of these polymer elements are defined in one file, "views.html". This file includes the Dart code to implement all these custom elements, "views.dart".
I have a separate "index.html" that does nothing more than import the "views.html" file along with the standard polymer and dart initialization files, and then place a single my-app declaration tag in the body.
I am finding that the ".created" constructors for 1) the various subelements and 2) the my-app element itself (that conditionally includes subelements) are being called multiple times - even though a my-app element is declared only once in the simple "index.html" file.
I can see it right in the debugger.
Particularly regarding the calling of "MyApp.created", I thought this might be some garbage collection issue. But I set a global variable the first time MyApp is created to the MyApp instance to preclude this.
What is even stranger to me is that when MyApp is created repeatedly again, I can see that the global variable (to prevent gc of a MyApp instance) has been reset to "null", as if the entire file of Dart code had been reloaded/reevaluated somehow.
Very strange to me.
Are the PolymerElement subclasses for custom elements instantiated merely for the definition of custom elements? If so, that would be odd. I would think such custom polymer element subclasses would only be instantiated during the declaration of polymer elements.
Also, would a template conditional inside a polymer element definition somehow be able to force reconstruction of a the defined polymer element? This is hard to imagine, but then anything is possible with Dart Polymer, LOL!!!
I was looking for an authoritative document on when constructors for custom Dart PolymerElements might be called, but I could find no such document.
Any and all help greatly appreciated.
Think of the following:
I've got a table data grid webcomponent and another component providing a data feed. In the applications main acting as kind of controller, i'd like to wire and setup those two components. Therefore i need a reference to underlying table grid instance Dart class and call methods on the "Component API' (to provide the table grid's tablemodel with data).
How do I access the Dart Class instance of a webcomponent instance from outside ?
Probably I missed something fundamental or are polymer webcomponents meant to interact only using databinding and stringy attributes stuff ?
Follow up: Found it !!
RLTable table = querySelector("#apptable").xtag;
does the job
As zoechi pointed out, xtag is not necessary.
var component = $['myComp'];
var componentXtag = $['myComp'].xtag;
print(component == componentXtag);
prints true. Therefore both
component.method()
componentXtag.method()
work fine
You don't need xtag. Some weeks/months ago this was a workaround until the final solution was landed.