import 'dart:html' show document;
import "package:dom_template/dom_template.dart" show html, render, bind, repeat, TemplateResult;
import "package:dom_template/html.dart" show div, input;
TemplateResult inputTemplate(InputField field) =>
html(
div(children: [
div(class: "text-input", text: bind(field.value)),
input(value: bind(field.value)),
]));
TemplateResult formTemplate(Form form) =>
html(
div(children: [
div(
class: "form-title",
children: [
div(text: bind(form.title)),
repeat(form.fields, inputTemplate),
])
])
);
main() {
var form = new Form("Foo", [new InputField("bar", "Bar", "42")]);
render(document.body, formTemplate(form));
}
class InputField {
InputField(this.id, this.label, this.value);
final String id;
final String label;
final String value;
}
class Form {
Form(this.title, this.fields);
final String title;
final List<InputField> fields;
}
I was looking at lit-html, and was wondering if it is posible to implement something similar in Dart, except specifying the html templates using Dart syntax rather than html inside literals. i.e. A similar syntax to how flutter builds UI components.I assume to make this efficient that some type of build step would be required (but maybe there are some more creative hackers out there who have a clever idea to avoid this).
--
For other discussions, see https://groups.google.com/a/dartlang.org/
For HOWTO questions, visit http://stackoverflow.com/tags/dart
To file a bug report or feature request, go to http://www.dartbug.com/new
---
You received this message because you are subscribed to the Google Groups "Dart Misc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to misc+uns...@dartlang.org.
div(id: "foo", attrs: {"--webkit-special": "bar"})
TemplateResult fooTemplate(String id, String value) => div(id: bind(id), children: [span(text: bind(value))]);
const String fooTemplateParts = ['<div id="', '"><span>', '</span></div>'];
TemplateResult fooTemplate(String id, String value) =>
lit.html(fooTemplateParts, [id, value]);
div({
String|StringBinding className,
Map<String,String|StringBinding> attrs,
List<Element|ElementBinding> children, ...})
T bind<T>(dynamic value) {}
One difference with the JS usecase is that Dart always has a build step. RIP Dartium. If we assume a build step, then Dart's existing template literal is enough.
Btw, the "Daml" syntax that I prototyped, just gets turned into strings by the buildscript. Support for unknown tags should be easy to support, via tag(tagName: "Foo"), or end users can just add their own tag function stub.
I like the idea of a unified markup syntax, rather that html and Dart. (Too much lisp in me perhaps).
Keep up the good work with lit ;) Exciting to see the standards work on this too.
I'm looking forward to seeing some examples of reactive style apps with web components and lit. I can't figure out how invalidation should work with a tree of components.