我目前正在开发一个包含许多组件(聚合物元素)的项目.所有的说和做,我可能会看到大约10多个组件的应用程序.目前,按照Pub的包布局约定,每个.html和相关的.dart文件都在web /目录中.
将它们放在我的应用程序的lib/src /中并且只有web中的主文件/但是此刻<link ref="import" href="package:my_app/src/my_component.html">
不起作用会很好(参见问题12867).
目前是否有任何约定用于处理应用程序的多个(私有)组件?我应该创建一个web/src /目录来加载相对于web /目录的导入/源文件吗?将Polymer Element .html文件保存在lib/src /中是否有意义(假设它受支持),因为它们不是传统推荐/期望在pub包布局中的纯dart文件?
请考虑以下代码:
myexample.html
<polymer-element name="my-example">
<script type="application/dart" src="myexample.dart"></script>
<template>
<style></style>
<div>
<ul>
<template repeat="{{ entry in map.values }}">
<li>{{ entry }}</li>
</template>
</ul>
<button on-click="{{add}}">Add</button>
</div>
</template>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
myexample.dart
@CustomTag('my-example')
class MyExample extends PolymerElement {
@observable Map<int, String> map = toObservable({});
int i = 0;
MyExample.created() : super.created();
void add() {
map[i++] = i.toString();
}
}
Run Code Online (Sandbox Code Playgroud)
每次单击"添加"按钮时都会填充地图,但地图条目不会显示在myexample.html中.那么:如何正确使用(并迭代)一个可观察的Map,以便html文件中的列表自动更新?
我已经构建了一个使用嵌套Polymer元素的Polymer.dart应用程序.父元素接受一个属性,并将其值作为属性传递给嵌套的子元素.这在DartEditor中"Run in Dartium"时工作正常,但在应用程序为"Pub Built"和"Run as JavaScript"后,嵌套元素无法加载.在构建过程中没有任何错误消息,或任何其他类型的指针.我不知道如何调试这个以及它在Dartium没有任何警告或错误的情况下按预期运行的事实没有帮助.
以下是我的应用程序的简化版本的代码,产生相同的问题. my_view
是父元素,是加载my_form
时附加的嵌套元素my_view
.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="import" href="my_view.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>The view polymer element should appear below:</h1>
<my-view viewAttribute="My_Value"></my-view>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
my_view.html
<polymer-element name="my-view" attributes="viewAttribute">
<link rel="import" href="my_form.html">
<template>
<div style="width: 100%;"><h1>The form should appear below:</h1></div>
<div id="form_div" style="width: 100%;"></div>
</template>
<script type="application/dart" src="my_view.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
my_view.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('my-view')
class MyView extends PolymerElement …
Run Code Online (Sandbox Code Playgroud) 我能为Dart Polymer找到的唯一可靠示例不使用任何参数.如何将参数传递给模板.它是通过构造函数完成的吗?
我的具体例子是我有一个带有标题的卡片元素,我想将卡片的标题作为字符串传递给元素.
我已经看过将数据传递给Polymer元素
但这不是我想要做的.我想从dart代码中传递数据.
我试图在另一个自定义elemnent阴影根中访问我的自定义元素的内容.
index.html
只是有一个my-tag-wrapper
元素:
<!-- import HTMLs and init Polymer-->
...
<my-tag-wrapper></my-tag-wrapper>
...
Run Code Online (Sandbox Code Playgroud)
my_tag_wrapper.html
包含my-tag
带有paragraph元素的元素:
<polymer-element name="my-tag-wrapper" >
<template>
<my-tag>
<p>wrapped my-tag contents</p>
</my-tag>
</template>
<script type="application/dart" src="my_tag_wrapper.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
my_tag.html
只是渲染它的内容:
<polymer-element name="my-tag" >
<template>
<content></content>
</template>
<script type="application/dart" src="my_tag.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
my_tag.dart
将它的内容打印到控制台:
@CustomTag('my-tag')
class MyTagElement extends PolymerElement {
ParagraphElement get p => this.querySelector('p');
MyTagElement.created() : super.created() {
var pe = p;
var t = (pe == null) ? null : pe.text;
print('my-tag p: ${t}');
print('my-tag outerHtml: …
Run Code Online (Sandbox Code Playgroud) 我正在处理一个考试项目,我需要更改页面中样式表的名称。我怎样才能用 Dart 做到这一点?我已经看到我可以从 Dart 编辑我的 css 的每个属性,但我已经制作了我想在我的页面中使用的其他 css。例如,我的 html 页面中有这个:
<link href="stile.css" rel="stylesheet" type="text/css">
Run Code Online (Sandbox Code Playgroud)
我需要编辑页面才能做到这一点
<link href="stile-blu.css" rel="stylesheet" type="text/css">
Run Code Online (Sandbox Code Playgroud)
我怎样才能做到这一点?
将 Dart Polymer 的纸元素与 Angular 2 一起使用时,如何消除 iOS 设备上约 300 毫秒的点击延迟?
例如,在一个 Angular 2 组件中,如果我有一个包含paper-button
with的 HTML 模板(click)="myFunc()"
,在 iOS 设备中,myFunc 在这个可怕的臭名昭著的延迟之后被调用。
我试过使用 FastClick.js,但是在我将它附加(到身体,或特定的纸按钮)之后,该元素不再可点击,当我点击它时我仍然可以看到涟漪效果,但方法是没有被调用(在移动设备上,但在桌面浏览器中它照常工作),它对paper-input
(s)也有相同的影响,它没有得到关注。
可以做些什么吗?也许可以制作一个相当于 FastClick.js 的 Dart/Angular2?
值得一提的是,在一个UIWebView(cordova)下,我无法让Angular2.dart和Polymer.dart同时工作,看起来它们不能很好地协同工作,这也是一个障碍,可以使用一些帮助也是如此。
来源:https : //github.com/aabluedragon/dart_issue_polymer_angular2_cordova
on-tap
事件可以防止点击延迟,但是,这意味着您不能使用 Angular2 的(点击)事件,它不能像 Polymer 那样很好地处理点击。在我对Polymer Dart 1.0.0的探索中,我发现了事件和观察者方法,我被迫使用这种模式
@reflectable
void someEvent([_, __]) {
...
}
Run Code Online (Sandbox Code Playgroud)
或者以观察者的方法
@Observe('someField')
void someFieldChanged([_, __]) {
...
}
Run Code Online (Sandbox Code Playgroud)
我理解方括号的用途,可选参数,我也理解如果你不关心传递的参数,你可以用下划线表示这个参数.令我惊讶的是我看到的例子使用双下划线__作为方括号之间的第二个符号.当我再次尝试仅使用一个下划线时,我得到一个重复的形式参数错误.你不关心的第二个参数是否与第一个不同?按照这个逻辑,如果我包含第三个,是否意味着它必须是一个三重下划线___?
谢谢.
在创建涉及继承的类方面,有些实际上需要覆盖的注释.特别是在使用PolymerDart时
@override
attached(){...}
Run Code Online (Sandbox Code Playgroud)
我认为没有理由需要它.没有它,它按预期工作.
因为它只是一个注释,它是否只是让开发人员看到它们才能理解该函数是否覆盖了其他一些函数?
我敢打赌,它只适用于开发人员,与其他执行某种执行的注释不同,这些不是.
我正在使用 Dart + Polymer,我们正在创建我们的应用程序的新版本,该版本进行了大量重构,删除了一些页面等等。
现在,有一个错误
类型错误:用作弱映射键的值无效
我认为它以某种方式连接到 Iron List 接收空数据,或者其他一些聚合物元素丢失了一些东西。
但是堆栈跟踪中没有有价值的信息。有没有办法调试这个错误,让我明白这个错误的由来?