dart - 从打包库导入的模型类?

标签 dart dart-polymer dart-pub

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

我相信我做对了(基于更多文章,例如How to subscribe to change of an observable field)。

它可以在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>

LOGS :

一切正常,直到将其构建为JS。尝试输入单词“hello”以输入时,我得到:

达腾-好
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"

最佳答案

当依赖包中有聚合物转换器时,由pub build生成的js与没有差异的js会有很大的不同,特别是涉及检测和传播可观察到的更改的js代码。

尝试将聚合物变压器添加到导入包pubspec中:
name: testlib dependencies: browser: any observe: any polymer: any transformers: - polymer: entry_points:
(请注意,不需要实际的entry_points值,只需存在聚合物变压器条目即可。)

关于dart - 从打包库导入的模型类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20750107/

相关文章:

flutter - 在类方法中使用 Navigator.push (MaterialPageRoute)

dart - 如何将多个 entry_points 传递给 pubspec.yaml 中的聚合物转换器?

flutter - 如何在flutter_svg中使用preCachePicture()

dart - HTML 和 Dart 导入的区别

polymer - 有没有办法调试 TypeError : Invalid value used as weak map key?

dart - 如何在 pub 包中正确使用 dart ffi?

firebase - 我如何在Flutter中将数据从一个小部件传递到另一个小部件?

syntax - Dart中点前的问号

flutter - 如何在 SingleChildScrollView 中插入 Expanded

notifications - Flutter:如何仅当我们使用 local_notification 单击通知时才执行操作?