Given custom component A:
<dom-module id="my-a-component">
<template>
<content id="nestednodes"></content>
</template>
</dom-module>
Then:
<my-a-component>
<my-b-component label='{{blabel}}'></my-b-component>
</my-a-component>
How can I get updated inside "my-a-component" when any children under "#nestednodes" is updated? or, when a new component gets added to the <content>?
I've been toying with MutationObserver but can't seem to see any updates to those nodes. Any guidance is highly appreciated.
Related
I try to create a vaadin component with polymer. I have used vaadin/flow-spring-tutorial as starting point. But I don't understand how to edit a template.
The template looks like this:
<!-- Defines the example-template element -->
<dom-module id="example-template">
<template>
<span>[[message]]</span>
</template>
<!-- Polymer boilerplate to register the example-template element -->
<script>
class ExampleTemplate extends Polymer.Element {
static get is() {
return 'example-template'
}
}
customElements.define(ExampleTemplate.is, ExampleTemplate);
</script>
</dom-module>
When I edit something. E.g.
<span>[[message]]!!TEST</span
It doesn't has any effect after restarting the embedded webserver.
The output is still
Hello from bean org.vaadin.spring.tutorial.Greeter#xxxxx
There is no directory that contains a compiled or cached version of this template and I don't know what I have to do to make the change take effect.
I am using beta3 of Vaadin 10 and I have a html-file bound to a Component (#HtmlImport), which contains a <dom-repeat> inside of which I have a paper-radio-group. I want the paper-radio-group#selected-property to be bound two way to my model, so that when a user selects a different radio-button, it's value will be written back to the model. Unfortunately, for me it works only as a one way model, as the java-side setter setAOrBProperty() is never called. Can someone give me a hint what I need to do to have the new value written to the server?
<link rel="import" href="./bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
<dom-module id=“dmmdl”>
<template>
<div>
<dom-repeat items=“[[myListOfSomething]]”>
<div>
<paper-radio-group selected="{{item.aOrBProperty}}” allow-empty-selection>
<paper-radio-button name=“a”>A</paper-radio-button>
<paper-radio-button name=“b”>B</paper-radio-button>
</paper-radio-group>
</div>
</template>
</div>
</template>
<script>
class BooksGridElement extends Polymer.Element {
static get is() {
return 'books-grid'
}
// only for testing !!
// ready() {
// super.ready();
// this.books = results;
// }
}
customElements.define(BooksGridElement.is, BooksGridElement);
</script>
</dom-module>
I suspect this is caused by a security feature of Flow. Arbitrary model value changes from the client are not accepted for security reasons. Instead, changes are only allowed for properties that are used in two-way template bindings (i.e. {{propertyName}}) or explicitly annotated with #AllowClientUpdates on the corresponding Java getter.
The logic that looks for {{propertyName}} doesn't have any specific knowledge about the inner workings of <dom-repeat>, so it cannot know that {{item.aOrBProperty}} corresponds to myListOfSomething[*].aOrBProperty.
If my assumption is correct, you could fix this case by adding #AllowClientUpdates to the getAOrBProperty() method in your model interface.
I am at: https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
and decided to create a dialog by doing something like:
<dom-module id="sample-dialog">
<template>
<paper-dialog-impl>
<h2>{{title}}</h2>
<div>
<content></content>
</div>
<div class="buttons">
<paper-button dialog-dismiss on-tap="cancel">Cancel</paper-button>
<paper-button dialog-confirm on-tap="submit">Accept</paper-button>
</div>
</paper-dialog-impl>
</template>
</dom-module>
it renders to the screen, but has no styles. I read: paper-dialog-shared-styles.html provide styles for a header, content area, and an action area for buttons but i don't know how to implement it. I was trying to use a link tag but that wasn't working. Specifically I tried inside the template: <link rel="import" href="polymer_elements/src/paper-dialog-behavior/paper-dialog-shared-styles.html" />
In my dart file, i imported these too, thinking it woudl be resolved.
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog_behavior.dart';
Edit: Right now, I have the class Implementation extending Polymer Element, which makes sense. I just wasnt sure if it needed to extend something else as well.
Edit 2: Updated this to be a standard paper-dialog instead, except now it wont render the item at all, even after updating the import in the dart backend.
After updating it to a paper dialog, there is a property that needs to be applied to the paper-dialog for it to be visible or not. that is the opened attribute.
Adding that to the inner paper-dialog makes it visible.
So, therefore, passing it down to the paper dialog by way of an outer opened, will make it toggle open/closed.
//in the sample-dialog dart
#property bool opened = false;
in the markup:
<paper-dialog opened$="{{opened}}" ...>
then now i can say either:
<sample-dialog></sample-dialog>
<sample-dialog opened></sample-dialog>
I'm using Dart and Polymer 1.0.0-rc.9. I have my own element (simplified here of course):
<dom-module id="something">
<style>
</style>
<template>
<paper-slider id='myslider'></paper-slider>
<div id='mydiv'></div>
</template>
</dom-module>
On the Dart side, if I do:
var div=queryselector('#mydiv')
it returns null.
I then set:
<template is='dom-bind'>
it finds it. But that creates errors, which say I must use a simple template.
So how do I find my <div> element?
Use
var listdivs = Polymer.dom (this.root).querySelectorAll('div');
It's likely because you're calling
var div=queryselector('#mydiv')
outside that Polymer Element. I'm not sure, but I'm guessing the ID's within the 'something' element are only available from within it.
Your best course of action would be to give your element an ID wherever you declared it.
<something id="something"></something>
then access the children of the element
var elm =queryselector('#something');
var children = Polymer.dom(elm).children[1];
I have been trying to extend the paper-item element from the paper_elements package. I do things as I have done when extending my own elements, but that fails.
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_item.html">
<polymer-element name="x-item" extends="paper-item">
...
</polymer-element>
#CustomTag('x-item')
class XItem extends PaperItem {
XItem.created() : super.created();
}
I get no error message, and no Polymer Element is initialised, with a blank part of the page where ever I've put a Polymer element.
I try using the same method I've used to extend a builtin HTML element like button or div. That also fails.
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_item.html">
<polymer-element name="x-item" extends="paper-item">
...
</polymer-element>
#CustomTag('x-item')
class XItem extends PaperItem with Polymer, Observable {
XItem.created() : super.created() {
super.polymerCreated();
}
}
And I get
Breaking on exception: NotSupportedError: Registration failed for type 'x-item'. The tag name specified in 'extends' is a custom element name. Use inheritance instead.
If I remove the extends part of the polymer template definition, again I get nothing. Where the Polymer elements in the page have been placed, there is nothing but blankness.
The previous error still happens if I import the actual JS version polymer-item.html via
<link rel="import" href="../../packages/paper_elements/src/paper-item/paper-item.html">
though I still have to extend PaperItem with Polymer and Observable, using the super.polymerCreated(); to generate that error.
I know that the Polymer Dart Team did some trickery to get the underlying paper-elements, which are written in JS, to work almost like they are Polymer Dart elements. I guess this is what's causing the problems. My question is how do I overcome this, so I can extend a paper-element in Dart?
UPDATE - A bug has been submitted https://code.google.com/p/dart/issues/detail?id=20388
I tried it and it also didn't work for me.
I'm pretty sure this is a bug/missing feature with the Dart wrapper for the Polymer.js elements used in paper-elements/core-elements.
You haven't added the HTML of your element.
Does your extending elements template contain a <shadow></shadow> element?
<polymer-element name="x-item" extends="paper-item">
<template>
<shadow></shadow>
</template>
</polymer-element>