Menu
  • HOME
  • TAGS

Dart Polymer: binding html files to scripts results in broken bootstrap.dart containing “%5C” characters

Tag: dart,polymer,smoke

After doing a Pub Get and Pub Upgrade my custom-PolymerElements don't work anymore. It seems to me that the

<script type="application/dart" src="view.dart"></script>

is interpreted incorrectly. In my index.html_bootstrap.dart it is listed as: import 'dialog%5Cview.dart' as smoke_1; The "%5C" ( \ ) should be a slash ( / ) anyway and I'm pretty sure that it shouldn't be escaped. I tried it with the dart stable (1.8.5) and dev (1.9.0) versions for 64bit Windows.

I already tried to revert my package to their previous version but since I hadn't constraint them in my pubspec file I have no way to determine which versions worked before my changes. In another dart polymer project I'm working on I use the same setup (extended polymer elements) and it still works . The equivalent position in the index.html_bootstrap.dart reads: import 'dialog/view.dart' as smoke_1;

(edit) some (shortened) code:

/web/dialog/error/view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="error-view">
<template>
    <style>
        paper-dialog {
            margin-top: 20px;
            height: 400px;
            width: 600px; }     
    </style>
    <paper-dialog id="extendedNode" heading="{{dialogtitle}}" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
      <content> 
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                    <p  cross-fade>A system error occured while connecting with the server.</p>
                    <br>
                    <p  cross-fade>Error message: {{dialogtext}}</p>
          </section>       
    </core-animated-pages>
    </content>
    </paper-dialog>
  </template>

<script type="application/dart" src="view.dart"></script>
</polymer-element>

/web/dialog/error/view.dart

import 'package:polymer/polymer.dart';
import '../view.dart'; // <- the base class 'DialogView'

  @CustomTag('error-view')
  class ErrorView extends DialogView{

    ErrorView.created() : super.created(){
    componentName = 'error-view';
    this.dialogtitle = 'System Error';
  }

}

/web/dialog/view.dart

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:intl/intl.dart';

import '../locale/de.dart' as de;

class DialogView extends PolymerElement {
   @observable int page;
   //there are a lot of helper functions and variables in here
}

I use many pairs of those components extending the base component (which has no view.html but only a view.dart that allows me to hold and manipulate different dialogs within one List. This worked perfectly fine until I did the Pub Get / Upgrade and was not solved by repairing the cache. A project using a similar structure still works fine.

Best How To :

This resolves it for now:

pubspec.yaml

code_transformers: '<= 0.2.5'

Dropshadow from paper-toolbar overlays paper-dialog

css,polymer,polymer-1.0

I suspect this was fixed here https://github.com/PolymerElements/paper-toolbar/issues/24.

Change style programmatically

polymer,polymer-1.0

You've hit a bug in the current version of Polymer, where a style change like this will propagate to child Polymer elements, but not to the element itself. See: https://github.com/Polymer/polymer/issues/1851 The workaround is to call Polymer.updateStyles() instead of this.updateStyles(). Here's the updated codepen....

Polymer 1.0 services issue

polymer,web-component

You have a few things that aren't quite right here. In reddit-post-list you are not using the dom-repeat template correctly. See below: <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="reddit-list-service.html"> <dom-module id="reddit-post-list"> <template> <reddit-list-service posts="{{posts}}"></reddit-list-service> <template is="dom-repeat" items="[[posts]]"> <p>{{item.data.author}}</p> </template> </template>...

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

javascript,html,templates,polymer

One solution is to bind the filter property to a filter generator, like so: filter="{{filterForCategory(category)}}" and then filterForCategory: function(category) { return function(fruit) { return fruit.category === category; } } Full example here: <dom-module id="x-example"> <template> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <h2>{{category}}</h2> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="{{filterForCategory(category)}}">...

Using resumable.js from Dart

dart,dart-js-interop,resumablejs

You have to use JsObject.fromBrowserObject to get the underlying js object. files.forEach((file) { rs.callMethod("addFile",[new JsObject.fromBrowserObject(file)]); }); ...

How to remove diacritics (accents) from a string?

string,dart,diacritics,unaccent

Not throughougly tested but seems to work void main() { var paragraph = "L'avantage d'utiliser le lorem ipsum est bien évidemment de pouvoir créer des maquettes ou de remplir un site internet de contenus qui présentent un rendu s'approchant un maximum du rendu final. \n Par défaut lorem ipsum ne...

How to test Dart Polymer elements using the new Test library?

unit-testing,testing,dart,dart-polymer

The annotation @whenPolymerReady on main() is missing. Also the test transformer (explained in the README.md of the test package) should be added to the transformer section in pubspec.yaml.

Click event not firing in polymer paper-icon-button

javascript,polymer

See here for the migration guide. For your event not firing see here Curly brackets ({{}}) are not used for declarative event handlers in the template. Your code should be: <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button> Your element registration needs to also now change. See here <body unresolved class="fullbleed layout vertical"> <dom-module id="my-app">...

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

javascript,html,polymer

The example shown in the documentation you link to isn't for calling methods or firing events, it's for using computed bindings. i.e. <div>{{ComputedBindingFunction(item)}}</div> If you're your trying to trigger an event, remove the braces: <div on-click="ComputedBindingFunction"></div> ... Access item from the triggered event ComputedBindingFunction: function(event){ _ComputedBindingFunction(event.model.item) } ...

Refuse to load JS in Dart

javascript,dart,google-chrome-app,content-security-policy

In a package app for Chrome you can not use the fields "content_scripts", "content_security_policy" and "tabs". Dart also does not support script injection dynamically. As explained here: Will there be a dynamic code injection for dart? To use JS code must save it locally, import it into your html code:...

Inheritance of customized polymer element in version 1.0

polymer,polymer-1.0

The current workaround for the lack of inheritance in Polymer 1.0 are shared behaviors. You can try to extract the common behavior of both custom elements into a separate behavior which you implement in both of your custom elements: tile-behavior.html: <script> TiteBehavior = { properties: { label: String, icon: {...

How to access detail from core-signal event in polymer.dart?

dart,dart-polymer

The way core-signal works, the data key of your detail object is what actually gets set as the detail of the event. The name property is then used to build the event type (it will be core-signal-$name). See the docs here https://github.com/Polymer/core-signals/blob/master/core-signals.html#L79...

How to Bind Attribute from Custom Polymer Element to angularjs

javascript,angularjs,polymer

I believe it is best to use the angular-bind-polymer directive from here. The code is already written and it is working, so no need for you to implement it by yourself. Instructions from the aforementioned page: This will only work if the Polymer element publishes and reflects attributes. That is,...

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

polymer

What you have in the first example is correct for Polymer 1.0. Here is the documentation for the template repeat (dom-repeat). <template is="dom-repeat" items="{{data}}"> <div> <span>{{index}}</span> <span>{{item}}</span> </div> </template> ...

Abstract methods in Dart

inheritance,dart,dart-editor,abstract-methods

From your question I would expect code like this void main() { new B(); } abstract class A { A() { a(); b(); c(); } a(); b(); c(); } class B extends A { B() : super(); @override a() => print('a'); @override b() => print('b'); @override c() => print('c'); }...

JsFunction.apply doesn't work while JsObject.callMethod does work (dart)

javascript,dart,dart-js-interop

It works with js["appendChild"].apply([span], thisArg: js); If you don't provide thisArg it's like you call Function.prototype.apply with null as first argument. Thus your Dart call is the same as the js : var div = document.querySelector('div'); var span = document.createElement("span"); span.innerText = "hello world"; div["appendChild"].apply(null, [span]); The execution of above...

PercentCompleteEditor allows values > 100 in bwu_datagrid

dart,bwu-datagrid

These editors are only examples to demonstrate how you can build your custom editors. I'll create an issue and fix it anyway. Thanks for reporting. https://github.com/bwu-dart/bwu_datagrid/issues/115

Polymer 1.0 strange behaviour on properties

polymer

There's a few things I think I can help you with here. First, you can make your JSON much more readable by using single quotes for your attributes. Additionally, you can include white space, if you are hard-coding the JSON: <fighter-profile fighter='{ "country":"USA", "countryFullName":"United States", "name":"Frank Mir", "nickname":"", "zuffa_record":{ "wins":"15",...

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

javascript,json,polymer

I am missing the closing'>' of the template. It should read <template is="dom-repeat" items="{{data}}"> <p><span>{{item.PracticeCode}}</span> - <span>{{item.Name}}</span></p> </template> ...

Dynamically adding and removing Event listeners

javascript,polymer,polymer-1.0

The problem is the listening function isn't the same function you are attempting to remove. By adding .bind(this), you have altered the function. In other words, this.listenerfunc !== this.listenerfunc.bind(this). This issue is address on the MDN page for addEventListener. See "The value of this within the handler". A quick way...

Computed bindings in auto-binding templates in Polymer 1.0

polymer,polymer-1.0

Simply assign the computed binding directly to the template element via a script, making sure that the involved properties are initialized after the definition of the computed binding. Example: <template is="dom-bind"> <div> <input value="{{text::input}}"> </div> <div>[[describe(text)]]</div> </template> <script> (function() { var template = document.querySelector('template[is="dom-bind"]'); template.describe = function(text) { if (text)...

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

javascript,html,templates,polymer,polymer-1.0

I stand to be corrected, but I think the problem is in your dom-repeat not getting notified, causing dom-if to not update also. You can use this.set('fruit_list.1.isOrange', 'true'); which works for your example. From Polymer documentation: set(path, value, root) - Convienence method for setting a value to a path and...

Using dom-if for conditionals in arrays

polymer,polymer-1.0

It's more efficient to use the filter/observe feature of dom-repeat instead of nesting dom-if. filter specifies a method that identifies records to display from your collection, observe tells the dom-repeat what data to observe to know when to re-run the filter. E.g. <template is="dom-repeat" items="{{records}}" filter="hasPersonLabel" observe="item.labels"> ... hasPersonLabel: function...

How to notify page transition with iron-pages

polymer,polymer-1.0

Or you can just observe route and when route === "some-page", send the refresh request to <lazy-list>? <dom-module id="my-app"> <template> ... <iron-pages attr-for-selected="data-route" selected="{{route}}"> <section data-route="some-page"> <paper-material> <lazy-list id="list"></lazy-list> </paper-material> </section> <section data-route="another page"> <paper-material elevation="1"> ... </paper-material> </section> </iron-pages> ......

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

Use iron-a11y-keys to listen for an enter keypress <dom-module is="keypress-test"> <template> <iron-a11y-keys target="[[_target]]" keys="enter" on-keys-pressed="_test"></iron-a11y-keys> <paper-input-container id="input"> <label>Enter Will Trigger</label> <input is="iron-input"></input> </paper-input-container> <paper-input label="Enter Won't Trigger"></paper-input> </template> </dom-module> <script> Polymer({ is: "keypress-test", ready:...

Icon list for Polymer

html,polymer

I was wondering the same and asked support in Github through the issues section. They gave me this link: Icon list for Polymer Here is the reply from one of the organization member: ...

Polymer 1.0 data binding not working

data,binding,polymer

Call this.notifyPath('navigator.currentStep', this.navigator.currentStep). See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path. Sometimes imperative code needs to change an object’s sub- properties directly. As we avoid more sophisticated observation mechanisms such as Object.observe or dirty-checking in order to achieve the best startup and runtime performance cross-platform for the most common use cases, changing an object’s sub-properties directly...

Checking, if optional parameter is provided in Dart

syntax,dart,syntax-error,questionmark

The feature existed at some point in Dart's development, but it was removed again because it caused more complication than it removed, without solving the problem that actually needed solving - forwarding of default parameters. If you have a function foo([x = 42]) and you want a function to...

polymer 1.0 data binding not working as expected

javascript,php,arrays,json,polymer

First, you need to transform your json {{data}} into an array of objects readable by <template is='dom-repeat'>. I assume that you want {"login":{"url":"/login","parent_id":"0"},"register":{"url":"/register","parent_id":"0"}} to become something like [ {name: "login", url: "/login", parent_id: "0"}, {name: "register", url: "/register", parent_id: "0"} ] The actual code to do the above should be...

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

dart,polymer,dart-polymer

At first, I think you should add the @whenPolymerReady annotation to main() instead of your Polymer initialization code. Instead of expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); you could use expect(document.querySelector('qme-header::shadow #headerErrorDiv'), isNotNull); I don't see a problem in your cod. Can you please provide a complete example that allows to reproduce your problem...

Does the dart VM impose restrictions on the stack memory size of a native extension?

c,memory,dart,dart-native-extension

Maybe problem in that the in first case you allocate an array on the stack? If you will use a reference to this array outside of the function (after when a function returns) you will always get a segmentation fault. Please give a small example of the use of your...

Using Polymer iron-ajax in repeating template

polymer

Firstly as vasek says, your JSON is incorrect. dom-repeat needs an array to iterate over and your JSON is currently returning an object. Secondly, you are accessing the properties on the iron-ajax element incorrectly. As the docs state In order to configure camel-case properties of elements using attributes, dash- case...

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

html,css,html5,polymer,polymer-1.0

The new auto-binding templates are <template is="dom-bind">. Documentation can be found at https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind, though it is a little sparse at the moment.

Binding imperatively

binding,polymer

Polymer 1.0 does not support this at the moment - as explained by @kevinpschaaf in Github https://github.com/Polymer/polymer/issues/1778.

Polymer 1.0: Two-way bindings with input elements

javascript,polymer,custom-element

First note that the notify and reflectToAttribute fields on the value property tell it how to react to it's parent not about how to bind to a child. IOW, notify: true means to make value two-way bindable from the outside, not from the inside. reflectToAttribute: true tells Polymer to write...

Having trouble applying a mixin in Polymer

html,css,polymer,polymer-1.0

--test-theme { is a property assignment, and has to be like so (added colon): --test-theme: { I'm not 100% sure why at this point, but simplifying: #story-card .story-content { ... to .story-content { ... fixes it when I run your test. http://jsbin.com/zozute/edit?html,output I'll follow up when I can explain this...

Polymer Data-Binding will not replace

javascript,polymer,web-component

You need to put your data inside a span: "The binding annotation must currently span the entire content of the tag. String concatenation is not supported inside a tag, and the tag can’t contain any whitespace" see: Polymer Documentation on binding to text content...

How to style Polymer's toolbar background in 0.5?

polymer,toolbar

It has been a while but I had this working in the past: body core-toolbar { background-color: #00FF00; } with whichever color you want to use as the background-color value....

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

firefox,dart,polymer

If you CSS is not inside a Polymer element you need to add the polyfill version of the selectors to make it work on browsers without native shadow-DOM support html paper-dialog, html /deep/ paper-dialog { margin-top: -150px; margin-left: -300px; } html paper-dialog core-animated-pages, html /deep/ paper-dialog /deep/ core-animated-pages{ height: 300px;...

how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?

javascript,polymer,web-component

paper-dialog inherits the Polymer.IronOverlayBehavior, which has the iron-overlay-opened and iron-overlay-closed events. <paper-dialog on-iron-overlay-opened="_myOpenFunction" on-iron-overlay-closed="_myClosedFunction"></paper-dialog> https://elements.polymer-project.org/elements/iron-overlay-behavior?active=Polymer.IronOverlayBehavior...

Change google-map center using Polymer

polymer

In your <script> tag you can create a ready call back function. See lifecycle callbacks Polymer adds an extra callback, ready, which is invoked when Polymer has finished creating and initializing the element’s local DOM. In here you can change the longitude and latitude properties of your my-map element which...

polymer databinding performence

polymer,btle

Performance of data-binding has to do with how many bindings there are, and the expense of whatever side-effects you trigger, not data-size or transfer speeds. Generally anything measured in seconds is much slower than the kind of throughput we worry about in Polymer....

Polymer 1.0 in Ember-cli, wrong appearance

javascript,ember.js,polymer,frontend,ember-cli

i have been trying to use polymer 1.0 with ember for the last month, turns out some polymer elements that use as insertion points will not work with ember. I have spoken with a polymer core member and he said they are curerntly working in some interop to get things...

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

javascript,html,polymer

Yep, that's working as intended. See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content. To bind to a child element’s textContent, you can simply include the annotation inside the child element. The binding annotation must currently span the entire content of the tag: … String concatenation is not supported inside a tag, and the tag can’t contain...

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

css,polymer

The themes from polymerthemes.com should apply across your entire project. Just download one of the pre-made themes (or create your own using the Polymer Theme Builder) and link to it like this in your <head>: <style is="custom-style"> @import url("path/to/theme.css"); </style> Alternatively, have a look to see how styles are applied...

google-signin don't return user info

polymer,web-component,google-signin,google-web-component

From polymer documentation: The google-signin-success event is triggered when a user successfully authenticates and google-signin-failure is triggered when this is not the case. Both events will also provide the data returned by the Google client authentication process. You can also use isAuthorized attribute to observe authentication state. Additional events, such...

Set focus for paper-input via radio button

input,radio-button,focus,polymer,paper-elements

You will need to bind a click event to radio1: <paper-radio-button name="radio1" on-click="_setInputFocus">Radio1Label</paper-radio-button> Then define the function _setInputFocus so that it selects the input and sets the focus to it: <script> Polymer({ is: 'the-name-of-your-element', _setInputFocus: function () { this.$$("input").focus(); } }); </script> ...

core-animated-pages in Polymer 1.0

polymer,web-component,polymer-1.0

The new component is named neon-animated-pages and is a part of neon-animation Here is its documentation: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages and repository: https://github.com/PolymerElements/neon-animation#page-transitions The animation-related elements that were part of core will be created as part of the neon product line. ...