In Dart how to setInnerHtml elements with <template> tag?

Question

For example, I have a piece of code like this:

String_test="
<template>
<label> {{count2}}  SSSSSSSSSSSSSSSSSSSSSSSSS </label> 
<input id="input1" type='text' value='{{count2}}'>
</template>"

and I want to assign String_test to another element, like:

DivElement span2 = new Element.tag("div");
span2.setInnerHtml(String_test);
_content.nodes.add(span2);

However, the "< template >' tag is not recognized, nothing will show up.

NOTE: My purpose is to use setInnerHtml to dynamically add contents to the webpage with data-binding still OK.

Any ideas?

Thanks!

Answer 1

It appears that you are including raw html in your Dart program files. This is not how Dart works. Dart has code (kept in .dart files) that is referenced to via a tag in the HTML file. This very quick tutorial will show you how to do that: https://www.dartlang.org/docs/tutorials/connect-dart-html/

Templating is found in the Dart Polymer library. It is too long of a process to go into here but you can find a short tutorial at: https://www.dartlang.org/docs/tutorials/polymer-intro/

I would also mention that Angular comes in a Dart flavor and I find it more accessible than the Polymer libraries. The tutorials and documentation are also much better. Angular is a more comprehensive suite of libraries and it's tutorials can be found here: https://github.com/angular/angular.dart.tutorial/wiki