1

在导入的打包库中定义模型类时，在聚合物元素中使用模型的正确方法是什么？

我相信我做得对（基于更多文章，例如如何订阅可观察字段的更改）。

它可以在 DARTIUM 中运行，但是当它构建到 JS 时就不行了。我无法弄清楚那里发生了什么，请参阅日志。字段中的侦听器和值表现得很奇怪。

关键因素：我的模型类由于某些原因被打包在共享库中，并且必须使用我的输入元素

我错过了什么？或者 dart2js 中是否存在错误？

文件和日志

testlib.dart（只是打包库中的一个模型，不是聚合物应用程序的一部分）：

library testlib;
import 'package:observe/observe.dart';

class MyModel extends Object with Observable{
  @observable String foo;
  String toString(){
    return "MyModel[foo:$foo]";
  }
}

在聚合物应用程序中，我们有：

all_elements.dart（模型是使用包导入的：...）

library test;
import 'package:polymer/polymer.dart';
import 'package:testlib/testlib.dart'; //!!!! note this is important, I need shared model

@CustomTag('my-input')
class MyInput extends PolymerElement {
  @published String value;
  valueChanged(oldValue){
    print('text changed from "$oldValue" to "$value"');
  }
  MyInput.created() : super.created();
}

@CustomTag('my-form')
class MyForm extends PolymerElement {
  @observable MyModel model = new MyModel();
 modelChanged(oldValue){
    print('text changed from "$oldValue" to "$model"');
  }

  MyForm.created() : super.created();
  void ready(){
    model.changes.listen((changes){
      print('model properties changed $changes');
    });
  }
}

和all_elements.html

<polymer-element name="my-input">
  <template>
    <p>My Input</p>
    <input type="text" value="{{value}}"/>
  </template>
</polymer-element>

<polymer-element name="my-form">
  <template>
    <my-input value="{{model.foo}}"></my-input>
  </template>
</polymer-element>

<script type="application/dart" src="all_elements.dart"></script>

和应用程序入口点：testapp.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test app</title>
    <link rel="import" href="all_elements.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <my-form></my-form>
  </body>
</html>

日志：

在构建到 JS 之前，一切正常。当试图写单词“你好”来输入时，我得到：

达蒂姆-好的

text changed from "null" to "h"
model properties changed [#<PropertyChangeRecord Symbol("foo") from: null to: h>]
text changed from "h" to "he"
model properties changed [#<PropertyChangeRecord Symbol("foo") from: h to: he>]
text changed from "he" to "hel"
model properties changed [#<PropertyChangeRecord Symbol("foo") from: he to: hel>]
text changed from "hel" to "hell"
model properties changed [#<PropertyChangeRecord Symbol("foo") from: hel to: hell>]
text changed from "hell" to "hello"
model properties changed [#<PropertyChangeRecord Symbol("foo") from: hell to: hello>]

JavaScript - 问题（输入“hello” - 获取“hel”，输入“mystery” - 获取“mytr”）

text changed from "null" to "h" 
model properties changed [#<PropertyChangeRecord Symbol("foo") from: null to: h>] 
text changed from "h" to "he" 
text changed from "he" to "h" 
model properties changed [#<PropertyChangeRecord Symbol("foo") from: h to: he>] 
text changed from "h" to "hl" 
text changed from "hl" to "he" 
model properties changed [#<PropertyChangeRecord Symbol("foo") from: he to: hl>]
text changed from "he" to "hel" 
text changed from "hel" to "hl" 
model properties changed [#<PropertyChangeRecord Symbol("foo") from: hl to: hel>] 
text changed from "hl" to "hlo" 
text changed from "hlo" to "hel"
4

2 回答 2

1

当依赖包中有聚合物转换器时，pub build 生成的 js 与没有聚合物转换器时完全不同，尤其是涉及检测和传播可观察更改的 js 代码。

尝试将聚合物转换器添加到导入包 pubspec：

name: testlib dependencies: browser: any observe: any polymer: any transformers: - polymer: entry_points:

（请注意，不需要实际的 entry_points 值，只需存在聚合物变压器入口即可。）

于 2014-04-09T20:25:13.837 回答
0

您说共享模型很重要。模型是否真的绑定在另一个地方？在您的示例MyModel中仅在 MyForm 中使用。

当你调用pub build --mode debug生成的 JavaScript 时可读性很强。也许您可以获得一些尝试调试 JavaScript 代码的附加信息。

于 2013-12-23T20:01:35.723 回答