I have problems accessing the parent scope inside the repeater.
The following code works:
<polymer-element name="x-playground" extends="div" attributes="children parent">
<template>
{{parent}}
<template repeat="{{children}}">
{{}}
</template>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
#CustomTag("x-playground")
class PlaygroundView extends PolymerElement with ObservableMixin {
#observable List children;
#observable String parent;
}
</script>
</polymer-element>
But If I replace it with the following:
<template repeat="{{children}}">
{{parent}}
</template>
it throws variable not found: parent in 770699111.
Is there a way to access the parent scope?
This is bug https://code.google.com/p/dart/issues/detail?id=12742. Please star the issue to be notified when it's fixed. Thanks for the report!
Related
I have some print statements in a Dart UI app. Depending on the UI selection strings are printed to the console. Everything used to work as expected with with Dart with Eclipse plugin. Now I cannot see any print output to the console in my dart-polymer app.
Any possible help is appreciated.
EDIT 1
.dart
import 'dart:html';
import 'package:paper_elements/paper_input.dart';
import 'package:polymer/polymer.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable String reversed = '';
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void reverseText(Event event, Object object, PaperInput target) {
reversed = target.value.split('').reversed.join('');
print(reversed); // NOTHING IS SHOWN IN ANY CONSOLE
}
.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
<paper-input label="Type something..." on-keyup="{{reverseText}}"></paper-input>
<p>
Reversed: {{ reversed }}
</p>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
The print statement in main_app.dart DOES NOT PRINT TO ANY VISIBLE CONSOLE.
Ensure you have the IntelliJ debug plugin installed in Dartium.
I had the same problem. Simply running the app (as in Dart Editor) does not seem to be enough. In WebStorm, the print() statements appear in Console as expected only when I run the app in debug-mode (Ctrl-d).
I have the following simple .dart and .html files
.dart
//import 'dart:html';
import 'package:polymer/polymer.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable DateTime today = new DateTime.now();
#observable String aDate = '';
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void onChangeFired() {
print(aDate);
}
}
.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
<input type='date' value='{{aDate}}'
on-change='{{onChangeFired}}' id='time' class='margin-lb5px'>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
Running the app in Dartium displays the calendar dropdown. However, each time I select a date, the application crasshes (exits) after printing the selected date with the following
2005-02-08 (:1)
<debug target crashed>
Nothing else is displyed in the console.
I created a new new polymer-app using Stagehand with the same result. Nothing else is there in the application.
This problem is present in the last two Dart Dev updates - I am currently using Dart 1.9.0-dev.9.1 (rev 44018) with the same result.
I am using the Dart eclipse plugin on Windows 8.1
Thanks
This is an issue in the Chrome version Dartium is built on.
Hopefully with Dart 1.15 we get the updated Dartium where this issue should be fixed.
I cannot get data to round trip from a child component to the parent component and back to a child component.
I have made a simple nested component testbed. Here is the child:
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="child-comp" attributes="x y">
<template>
<input type='text' value='{{x}}'/>
<p>-x={{x}}-</p>
<p>list:
<template repeat='{{y}}'>-{{ }}-</template>
</p>
</template>
<script type='application/dart'>
import 'package:polymer/polymer.dart';
#CustomTag('child-comp')
class ChildComp extends PolymerElement {
#observable var x;
#observable var y;
ChildComp.created() : super.created();
}
</script>
</polymer-element>
It takes a text input (x) and echoes it out (the p immediately after the input). It also send x back to the parent control where it is added to a list (y) that should then be iterated through in the child.
Here is the parent component:
<link rel="import" href="../packages/polymer/polymer.html">
<link rel="import" href="../components/child_comp.html">
<polymer-element name="top-comp">
<template>
<child-comp x='{{s}}' y='{{t}}'></child-comp>
</template>
<script type='application/dart'>
import 'package:polymer/polymer.dart';
#CustomTag('top-comp')
class TopComp extends PolymerElement {
#observable String s = '1234';
#observable List<String> t = ['A', 'B', 'C'];
TopComp.created() : super.created();
sChanged(oldVal, newVal) {
t.add(newVal);
}
}
</script>
</polymer-element>
From the child to the parent works and the change is correctly added to the List. But the List does not seem to get to the child - the DOM is never updated.
I have tried every possible combination of the decorators, but perhaps the answer is in a variant of the bind= syntax..
A side note: is there authoritative updated documentation on the decorators? Searching turns up a bunch of references of varying antiquity.
If I understand your problem correctly, you need to make sure that not only is your List observable, but also its elements. You can do so like this:
#observable List<String> t = toObservable(['A', 'B', 'C']);
This way, changes to t's elements (instead of just t itself) are "announced", and the DOM can update accordingly.
I basically want to create a <core-tooltip> tag, not in HTML, but in dart.
So i tried:
CoreTooltip tooltip = new CoreTooltip();
CoreTooltip tooltip = document.createElement("core-tooltip"):
CoreTooltip tooltip = new Element.tag("core-tooltip"):
got always the same Exception
Uncaught Error: type 'HtmlElement' is not a subtype of type 'CoreTooltip'
Why does that just not work?
You shouldn't use this method
document.createElement("core-tooltip"):
the other two are fine though.
I assume the element creation fails because the code is in a custom main and is executed before Polymer is done with initialization.
See how to implement a main function in polymer apps for more details.
If you execute the code inside a Polymer elements (for example attached() method after super.attached()) or in an event handler like on-click this will work.
Another possibility is, that you app is missing an HTML import that imports <core-tooltip>. Without an import this can't work either.
I tried it with this code and it worked for me
app_element.dart
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_tooltip.dart';
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created() { }
#PublishedProperty(reflect: true) bool isValidationError;
void attached() {
super.attached();
CoreTooltip tt = new CoreTooltip();
print(tt);
}
}
app_element.html
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_tooltip.html">
<polymer-element name="app-element">
<template>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
I'm trying to create custom-tabs web-component using polymer-dart. The component itself is a tab container, which can have a custom-tab elements inside of it.
I want to have an html like this:
<custom-tabs selected="three">
<custom-tab name="one">... content skipped ...</custom-tab>
<custom-tab name="two">... content skipped ...</custom-tab>
<custom-tab name="three">... content skipped ...</custom-tab>
</custom-tabs>
In custom-tabs html file I want to have something like this:
<polymer-element name="custom-tabs">
<template>
<div class="tabs">
<content select="custom-tab"></content>
</div>
<nav>
For each of custom-tab I want to create tab header (link) here
</nav>
</template>
</polymer-element>
Is it possible to:
For each custom tab inserted into .tabs create link inside div?
If custom-tab element has a property named 'caption', can I get it using some kind of {{attribute-name}} syntax?
Finally I want to look the component like this:
P.S. I only need help on polymer-dart <template> syntax, I can deal with css myself. Thanks in advance!
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="custom-tabs">
<template>
<style>
:host {
display: block;
}
</style>
<nav>
<template repeat="{{tab in tabHeaders}}">
<div>{{tab}}</div>
</template>
</nav>
<div class="tabs">
<content id="content" select="custom-tab"></content>
</div>
</template>
<script type="application/dart" src="custom_tabs.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
import 'dart:html' as dom;
#CustomTag('custom-tabs')
class CustomTabs extends PolymerElement {
CustomTabs.created() : super.created() {}
#observable
// toObservable() is to make Polymer update the headers (using template repeat) when the tabs list changes later on
List<String> tabHeaders = toObservable([]);
attached() {
super.attached();
// initialize the header list when the custom-tabs element is attached to the dom
updateTabHeaders();
}
// needs to be called every time the list of custom-tab children changes
void updateTabHeaders() {
tabHeaders.clear();
// the content element needs to have the id 'content'
($['content'] as dom.ContentElement).getDistributedNodes().forEach((e) {
// you can skip elements here for example based on attributes like 'hidden'
tabHeaders.add((e as dom.Element).attributes['name']);
});
}
}