dart-polymer

问题 Assume we have container polymer element and another dummy polymer element. Container polymer element has div block for inserting another polymers. container_polymer.html <polymer-element name='container-polymer'> <template> <div id="container"> </div> <button on-click="{{first}}">show first</button> <button on-click="{{firstPrepared}}">show first prepared</button> <button on-click="{{second}}">show second</button> </template> <script type="application/dart" src="container_polymer.dart"> <

问题 I wish to make a generic list using polymer and dart. I am extending the UL element to do so. I want to place template variables within the content of this custom element. <ul is="data-ul"> <li>{{item['first_name']}}</li> </ul> The custom element <polymer-element name="data-ul" extends="ul"> <template repeat="{{item in items}}"> <content></content> </template> <script type="application/dart" src="data-ul.dart"></script> </polymer-element> I was expecting the template variable to be

问题 I am trying to use paper-button with type attribute set to submit (as one would do with button element) to submit the enclosing form , but for some reason it is unable to submit the form. Is this a bug or feature? How to make paper-button submit the form? PS: I am in dart land (not js). 回答1: As noticed by Gunter, you can create a custom element which extends some of native element with your desired semantics. I encountered with your issue too and I've created simple element which gives

问题 I wondered why Polymer elements need a dash in custom elements name like <my-component> while this is not necessary for Angular components especially as Angular components also use ShadowDOM. ** Edit** It doesn't even seem to be suggested good practice in Angular. 回答1: The HTML spec allows you to use unknown tags ( <tab> , <panel> ) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native. Tags that don't have

问题 I want a child element to dispatch a custom event and the parent element to listen for it, and take some action. How do I do this when working with Polymer? 回答1: You can dispatch a custom event from a polymer-element like this: dispatchEvent(new CustomEvent('nameOfEvent')); Then, parent element can listen for the custom event like this: <child-element on-childspeaks="fireAway"></child-element> Here is a more complete example showing how this works. First, here is the code for the child

问题 I read Polymer API developer guide, but unfortunately it has examples only for JavaScript developers. Some examples I try to port into Dart, but in this case I get fail. Please, go to https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global (Section Supporting global variables ). Here is a clip from the documentation: elements.html <polymer-element name="app-globals"> <script> (function() { var values = {}; Polymer({ ready: function() { this.values = values; for (var i = 0; i <

问题 How can I bind a text which contains url as html. Is it possible by using the following code ? @CustomTag('my-element') class MyElement extends PolymerElement { @observable String text = "Bla bla bla '<a href="mysite.com">link</a>';" MyElement.created() : super.created(); } <polymer-element name="my-element"> <meta charset="utf-8"> <template> <p> {{text}} </p> </template> <script type="application/dart" src="my_element.dart"></script> </polymer-element> 回答1: Update A ready-to-use element for

问题 I am trying to understand how observable getters work when they use other class instance properties: When I bind the implicit getter/setter pair 'name' it updates in the input and in the div and everything is synced nicely. However the explicit getter 'fullname' is not updating in the HTML. Is there a way to make that work (basically the 'fullname' in the element binding should update as well)?? Maybe I am missing a setter, but then again setter does not make sense here... Very simple example

问题 I generated a sample Polymer web project. Added following js file. jslib.js function testfunction() { alert("test"); } in clickcounter.dart I added dependency import 'package:js/js.dart' as js; and changed increment() function void increment() { js.context.testfunction(); count++; } In clickcounter.html added js file import <script src="jslib.js" type="text/javascript"></script> And in main html file added <script src="packages/browser/interop.js"></script> It works correctly when in executed

问题 How can I select nodes within shadow DOM? Consider the following example: structure of "unshadowed" DOM <app-element> #shadow-root <h2></h2> <content> #outside shadow <h2></h2> </content> <ui-button> #shadow-root <h2></h2> </ui-button> </app-element> index.html <body> <app-element> <!-- OK: querySelect('app-element').querySelect('h2') --> <!-- OK: querySelect('app-element h2') --> <!-- There is no problem to select it --> <h2>app-element > content > h2</h2> </app-element> </body> templates