dart - 在 polymer.dart 中绑定(bind)表格

标签 dart polymer

如果我不使用自定义元素,我无法将模型绑定(bind)到表格。
自定义元素工作正常,但是当我尝试手动绑定(bind)模型而不创建自定义组件时,不会显示任何数据。有任何想法吗?

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')];
}

没有自定义元素版本:

polymer 测试.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 测试.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;
}

最佳答案

将其添加到 main 是否有帮助?

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

polymer/boot.js 应该这样做,但我认为现在它不会启动,除非页面至少有一个 polymer 元素(这是一个错误)。

或者,您可以添加一个虚拟 <polymer-element>到 HTML。这将解决问题。

关于dart - 在 polymer.dart 中绑定(bind)表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18227193/

相关文章:

firebase - Flutter Firestore 检索和设置嵌套对象

flutter - Flutter-尝试从AssetImage加载时发生超时

flutter - 当流产生一定值(value)时,创造流之外的 future

javascript - 在 Polymer 中使用 Bootstrap 的工具提示

javascript - 如何使用 vanilla js 更新 polymer 元素的数据(dom)?

dart - flutter 日期时间选择器添加开始和结束日期

android - 在Flutter SDK中找不到Dart

polymer - Chrome 开发编辑器 (CDE) 默认快捷键绑定(bind)?

javascript - 如何在只读 Polymer 1.x 属性中设置子属性

dart - polymer :将内容嵌套在内容中