Question

我正在尝试一些初学者教程来理解与Dart-Polymer的数据绑定，但没有一个例子正在运行。我能够运行项目中包含的示例，所以想知道我的代码有什么问题。从以下link，这是我的代码：

<!DOCTYPE html>

<html>
<head>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->

<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="bind.dart"></script>
</head>

  <body>
   <p>x = {{ x }}</p>

     <ul>
       <template iterate='item in list'>
         <li>list item = {{item}}</li>
       </template>
     </ul>

     <ul>
       <template iterate='key in map.keys'>
         <li>map key = {{key}}, map value = {{map[key]}}</li>
       </template>
     </ul>

  </body>
</html>

飞镖文件：

import 'dart:async';
import 'package:polymer/polymer.dart';

List list = toObservable(new List());
Map<String, num> map = toObservable(new Map());
@observable num x = 0;

void main() {

  initPolymer().run(() {
      Polymer.onReady.then((_) {

         new Timer.periodic(new Duration(seconds: 1), (_) {
         x += 1;
         list.add(x);
         map[x.toString()] = x;
         if (x % 4 == 0) {
         list.clear();
         map.clear();
         }    
          return x;
        });
     });
  });
}

当我运行上面的代码时，x = {{x}}在控制台中打印出以下内容：

无法再观察顶级字段。可观察的字段应该放入一个可观察的物体。

我尝试从变量“x”中删除@observable（并且还删除了.html文件中的引用），然后没有打印任何内容。这是经过修改的HTML：

<!DOCTYPE html>

<html>
<head>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->

<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="bind.dart"></script>
</head>
  <body>
     <ul>
       <template iterate='item in list'>
         <li>list item = {{item}}</li>
       </template>
     </ul>
     <ul>
       <template iterate='key in map.keys'>
         <li>map key = {{key}}, map value = {{map[key]}}</li>
       </template>
     </ul>
  </body>
</html>

修改了DART文件：

import 'dart:async';
import 'package:polymer/polymer.dart';

List list = toObservable(new List());
Map<String, num> map = toObservable(new Map());
num x = 0;

void main() {

  initPolymer().run(() {
      Polymer.onReady.then((_) {
         new Timer.periodic(new Duration(seconds: 1), (_) {
         x += 1;
         list.add(x);
         map[x.toString()] = x;
         if (x % 4 == 0) {
         list.clear();
         map.clear();
         }    
          return x;
        });
     });
  });
}

Answer 1

有两件事：

Mousache绑定仅适用于<template>标记。您可以在Polymer元素之外添加<template>标记（例如，请参阅https://github.com/dart-lang/core-elements/blob/master/test/core_input.html）为此，您使用AutoBindingElement（<template is="auto-binding-dart">），您必须为其指定模型（请参阅下面的代码）。

<template id="bindValueTemplate" is="auto-binding-dart">
  <core-input id="bindValue" placeholder="bindValue" value="{{stringValue}}"></core-input>
</template>

您无法使顶级变量可观察（如错误消息所示）。变量必须位于扩展或实现Observable的类中：

class MyModel extends Object with Observable {
  @observable
  String stringValue;

  @observable
  bool isInvalid;

  Function changeHandler;
  Function inputHandler;
  Function inputInvalidHandler;
  Function inputValidHandler;
}

void main() {

  initPolymer().run(() {
    return Polymer.onReady.then((_) {
      var template =
          dom.document.querySelector("#bindValueTemplate") as AutoBindingElement;
          var model = template.model = new MyModel();
    });
}

Dart的数据绑定失败

1 个答案: