dart - 通过表达式填充 Polymer 属性-6ren

dart - 通过表达式填充 Polymer 属性

转载作者：行者123 更新时间：2023-12-03 03:47:09

25

4

我正在构建一组聚合物组件，从更简单的通用组件(例如 Canvas 周围的简单包装器)到更高级别的组件(例如使用简单 Canvas 包装器进行特定类型绘图的东西)开始。

一旦我达到大约 3 层深度，我就无法弄清楚如何填充更简单组件的聚合物元素属性。对我来说主要的问题是 child 的属性通常来自更高级别组件的属性。

例如，从一个简单的低级组件开始，它只有一个属性“消息”

foo.html

<!DOCTYPE html>

<polymer-element name="foo-view" >

  <template>
    <p>
      message: '{{message}}'
    </p>
  </template>

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

</polymer-element>

Dart

library foo;

import 'package:polymer/polymer.dart';

@CustomTag('foo-view')
class FooViewElement extends PolymerElement {
  @published String message;

  FooViewElement.created() : super.created();
}

然后是一个更高级别的组件，它使用 foo 并根据它自己的属性“bar”派生 foo 的消息属性

bar.html

<!DOCTYPE html>

<link rel="import" href="foo.html">

<polymer-element name="bar-view" >

  <template>
    <foo-view message="{{message}}" ></foo-view>
  </template>

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

</polymer-element>

条形 Dart

library bar;

import 'package:polymer/polymer.dart';

@CustomTag('bar-view')
class BarViewElement extends PolymerElement with ChangeNotifier {
  String _bar;

  @published String get bar {
    return _bar;
  }

  @published void set bar(String b) {
    _bar = b;
    if (b != null) {
      // derive the message property here
      message = "this is what I expect to end up in foo.message";
    }
  }

  @observable String message = "initial message";

  BarViewElement.created() : super.created();
}

所以我的期望(意图)是，当设置 bar 属性时，它会计算应该是什么消息并设置该属性。反过来，我希望会传播到 foo 的消息属性中，并且显示的值应该是“这就是我期望在 foo.message 中结束的内容”。

显然这是一个愚蠢的例子，因为我并没有真正派生消息字段，但在我的真实世界用例中，我正在构建和对象，此时基于传递给更高级别组件的那个。

为了测试它，我创建了一个示例组件

example_ui.html

<!DOCTYPE html>

<link rel="import" href="packages/polymerIssue1/bar.html">

<polymer-element name="example-ui" >
  <template>
    <bar-view bar="{{bar}}"></bar-view>
  </template>
  <script src="example_ui.dart" type="application/dart"></script>
</polymer-element>

example_ui.dart

library ui;

import 'package:polymer/polymer.dart';

@CustomTag('example-ui')
class ExampleUi extends PolymerElement {
  // Note in my real world example this constructs a complex object
  @observable String bar = 'this is the value of bar';

  ExampleUi.created() : super.created();
}

然后是测试页

<!DOCTYPE html>

<html>
  <head>
    <link rel="import" href="example_ui.html">

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <div>
      <h3>example-ui</h3>
      <example-ui></example-ui>
    </div>
  </body>
</html>

它显示 message: 'initial message'而不是 message: 'this is what I expect to end up in foo.message'
我不确定我是否弄错了；或者聚合物中有 bug ；或者我完全错了。

最佳答案

你混合封装和继承。
当您扩展元素类时，您还必须设置 extends HTML 标记 ( bar.html ) 中的属性。
但在这种情况下，您不会嵌入基本元素( foo-view )。
见 extend_custom_element from Polymer examples

上次我使用扩展自定义元素时，当我声明 @published 时效果更好。 HTML 中的属性 <polymer-element name="foo-view" attributes="message"> (这不应该是必要的，所以这可能会在此期间修复)

如果你扩展一个 Polymer 元素，你应该添加一个 <shadow></shadow>标记到派生元素。这是插入构成基本元素的元素的地方。

我建议你试试这个，如果你仍然没有得到它的工作，更新问题，以便它显示你已经走了多远，我们/我再看一次。

关于dart - 通过表达式填充 Polymer 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21494887/

25

4

0

文章推荐： azure - 为什么 get-azureserviceprincipal 找不到服务主体？

文章推荐： sql - 根据当前日期和配置数据获取记录

文章推荐： c# - 无法加密 Azure CloudFile。能够加密 Azure Blob

文章推荐： dart - 使用lawndart获取indexedDB中对象的值

javascript 属性 .net 属性
你能比较一下属性吗我想禁用文本框“txtName”。有两种方式使用javascript，txtName.disabled = true 使用 ASP.NET，哪种方法更好，为什么？最佳答案我
VBS教程：属性-Count 属性
Count 属性返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
VBS教程：属性-CompareMode 属性
CompareMode 属性设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
VBS教程：属性-Column 属性
Column 属性只读属性，返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
VBS教程：属性-AvailableSpace 属性
AvailableSpace 属性返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive
VBS教程：属性-Attributes 属性
Attributes 属性设置或返回文件或文件夹的属性。可读写或只读（与属性有关）。 object.Attributes [= newattributes] 参数 object
VBS教程：属性-AtEndOfStream 属性
AtEndOfStream 属性如果文件指针位于 TextStream 文件末，则返回 True；否则如果不为只读则返回 False。 object.A
VBS教程：属性-AtEndOfLine 属性
AtEndOfLine 属性 TextStream 文件中，如果文件指针指向行末标记，就返回 True；否则如果不是只读则返回 False。 object.AtEn
VBS教程：属性-RootFolder 属性
RootFolder 属性返回一个 Folder 对象，表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
VBS教程：属性-Path 属性
Path 属性返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。说明对于驱动器，路径不包含根目录。
VBS教程：属性-ParentFolder 属性
ParentFolder 属性返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。说明以下代码
VBS教程：属性-Name 属性
Name 属性设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
VBS教程：属性-Line 属性
Line 属性只读属性，返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。说明文件刚
VBS教程：属性-Key 属性
Key 属性在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary
VBS教程：属性-Item 属性
Item 属性设置或返回 Dictionary 对象中指定的 key 对应的 item，或返回集合中基于指定的 key 的&
VBS教程：属性-IsRootFolder 属性
IsRootFolder 属性如果指定的文件夹是根文件夹，返回 True；否则返回 False。 object.IsRootFolder object 应为&n
VBS教程：属性-IsReady 属性
IsReady 属性如果指定的驱动器就绪，返回 True；否则返回 False。 object.IsReady object 应为 Drive&nbs
VBS教程：属性-FreeSpace 属性
FreeSpace 属性返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
VBS教程：属性-FileSystem 属性
FileSystem 属性返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。说明可
VBS教程：属性-Files 属性
Files 属性返回由指定文件夹中所有 File 对象（包括隐藏文件和系统文件）组成的 Files 集合。 object.Files object&n

首页

博学

6Ren·AI

商城

dart - 通过表达式填充 Polymer 属性