All geek questions in one place

Binding a table in polymer.dart

I am unable to bind the model to the table unless I use a custom item. The custom item works fine, but when I try to bind the model manually without creating a custom component, the data is not displayed. Any ideas?

custom_table.html

<!DOCTYPE html> <html> <body> <polymer-element name="custom-table" extends="div" apply-author-styles> <template> <table> <tbody> <tr template repeat="{{people}}"> <td>{{firstName}}</td> <td>{{lastName}}</td> </tr> </tbody> </table> </template> <script type="application/dart" src="custom_table.dart"></script> </polymer-element> </body> </html>

custom_table.dart

 import 'package:polymer/polymer.dart'; class Person { String firstName; String lastName; Person(this.firstName, this.lastName); } @CustomTag('custom-table') class CustomTable extends PolymerElement with ObservableMixin { List people = [new Person('Bob', 'Smith'), new Person('Alice', 'Johnson')]; }

No user element version:

polymer_test.html

 <!DOCTYPE html> <head> <script src="packages/polymer/boot.js"></script> </head> <html> <head> <meta charset="utf-8"> <title>Polymer test</title> <link rel="stylesheet" href="polymer_test.css"> </head> <body> <h1> Table test </h1> <template id="tableTemplate" repeat> <table> <tbody> <tr template repeat="{{ people }}"> <td>{{firstName}}</td> <td>{{lastName}}</td> <tr> </tbody> </table> </template> <script type="application/dart" src="polymer_test.dart"></script> </body> </html>

polymer_test.dart

 import 'dart:html'; import 'package:polymer/polymer.dart'; import 'package:fancy_syntax/syntax.dart'; class Person { String firstName; String lastName; Person(this.firstName, this.lastName); } class Message extends Object with ObservableMixin { List<Person> people = toObservable([new Person('Bob', 'Smith'), new Person('Alice', 'Johnson')]); } main() { var msgModel = new Message(); TemplateElement template = query('#tableTemplate'); template.bindingDelegate = new FancySyntax(); template.model = msgModel; }
+4
source share
3 answers
My template definition is missing a binding attribute

. Instead, I mistakenly used repeat. It should be:

 <template id="tableTemplate" bind>

Instead:

 <template id="tableTemplate" repeat>
0
source

Does this add to the main?

 void main() { initPolymer([], () { // put existing main code in here }); }

polymer / boot.js should do this, but I think that it doesn’t kick now if there is at least one polymer element on the page (this is an error).

you can add a <polymer-element> layout in the HTML. This will help solve the problem.

+1
source

Can you try

 templateBind(query('#tableTemplate')) ..bindingDelegate = new FancySyntax() ..model = msgModel;

See http://api.dartlang.org/docs/releases/latest/template_binding.html#templateBind

0
source

Source: https://habr.com/ru/post/1496985/

More articles:


All Articles