1

I want to build a large application in Dart using material design. To accomplish this I included paper_elements into my project. My problem is, that I can't think of a good way to build my multi page application with paper_elements. Usually I create objects which would create their elements inline and add / remove themselves to the dom. The way I understand the paper_element tutorials I found so far this is not possible with them.

Is there a simple way to use paper_elements in dart while having an object based structure? For example I would have my application which loads either a register or login object and displays it in the browser. When logging in it should load a menu object which displays a menu and so on. All page changes should happen without a page reload.

I'm looking forward to all help, examples or links you could provide regarding my problem.

Cheers, Tim

Tim Rasim
  • 655
  • 7
  • 20

1 Answers1

3

In Dart you normally build the app as SPA (single page application) without reload. You can add remove a paper-element like normal DOM elements (div, input, ...) querySelector('#placeholder').append(new Element.tag('paper-input')); You can also use <template if="{{}}"> or <template repeat="{{}}"> to make Polymer auto-insert these elements when certain conditions are fulfilled or for each value in a collection.

Your question isn't very specific but I guess all you need is already available here on SO as Q/A. Just search for [dart-polymer]. If you don't find anything just ask and we point you in the right direction.

a few that might be relevant

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you for your answer. This sounds like a solution that will work for me. I've tried to implement this for my project but stumbled across a problem: the elements will be added correctly (i.e. in my initPolymer().run(() {Polymer.onReady.then((_){... method, but will not be rendered as paper elements in the dom. The html file contains those includes: – Tim Rasim Jul 30 '14 at 08:28
  • You don't need the this import `` in the entry page, only in the HTML files of your own Polymer elements. You need an import for each paper-element you want to use instead. – Günter Zöchbauer Jul 30 '14 at 08:34
  • Thank you for your help, this solves my problem just fine! One last question though, I have a custom polymer-element named "register-card". It consists of a div element containing two paper-input elements. When I import my custom element it will be in the dom looking like this: but the element I added to the dom stays empty (without any shadow-node) – Tim Rasim Jul 30 '14 at 09:45
  • I'm missing a script tag in your `register-card` definition. You either need to add a ` – Günter Zöchbauer Jul 30 '14 at 09:49