我有一个对象列表(例如,人),我在列表中动态添加和删除.当某个属性更改列表中的任何项目时,我想在列表中运行查询.
例如,我想知道列表中的任何对象是否更改了其"signedAgreement"属性.我不想手动将侦听器附加到每个对象,我只想询问列表.我怎样才能做到这一点？
我的代码:
library my_element;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'models.dart';
@CustomTag("my-element")
class MyElement extends PolymerElement with ObservableMixin {
final List people = toObservable([]); // observe adds/removes to the list
final Person newPerson = new Person();
// How can I know when to re-evaluate signedCount?
int get signedCount => people.where((Person p) => p.signedAgreement).length;
void save(Event e, var detail, Node target) {
people.add(new Person.from(newPerson));
newPerson.blank();
}
}
我的模型对象看起来像:
library models;
import 'package:polymer/polymer.dart';
class Person extends Object with ObservableMixin {
@observable String …直到最近我可以使用bindProperty,如下所示或在这个问题中,但是已经改变了0.8.0并且我不知道如何更改我的代码以获得旧的行为(doSomething()被调用):
<polymer-element name="my-login" attributes="model">
<template>
<template if="{{"model.isLoggedIn}}">
...
</template>
</template>
<script type= ... ></script>
</polymer-element>
.
@CustomTag("my-login")
class MyLogin extends PolymerElement with ObservableMixin {
LoginModel model;
@override
inserted() {
void doSomething() {
...
}
logoutChangeSubscription = bindProperty(model,#isggedIn,()=> doSomething());
}
}
class Model extends Object with ObservableMixin {
@observable bool isLoggedIn = false;
}
以下html在文本左侧显示一个漂亮的相机图标.在尝试设计聚合物组件时,这是如何实现的？
<!doctype html>
<html>
<head>
<link rel="stylesheet" id="font-awesome-4-css" href="http://astronautweb.co/wp-content/themes/astro2012/css/font-awesome-4.0.3.css?ver=4.0.3" type="text/css" media="all">
</head>
<body>
<p><i class="fa fa-camera-retro fa-lg"></i> Cool camera</p>
</body>
具体来说,应该在哪里包含链接,应该应用什么样的应用程序设置,模板中的样式应该是什么.
假设我们有容器聚合物元件和另一个虚设聚合物元件.容器聚合物元件具有用于插入另外聚合物的div块.
container_polymer.html
<polymer-element name='container-polymer'>
<template>
<div id="container">
</div>
<button on-click="{{first}}">show first</button>
<button on-click="{{firstPrepared}}">show first prepared</button>
<button on-click="{{second}}">show second</button>
</template>
<script type="application/dart" src="container_polymer.dart">
</script>
</polymer-element>
插入虚拟聚合物有三个按钮:
prepareElement()该聚合物.container_polymer.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dummy_polymer.dart';
@CustomTag('container-polymer')
class ContainerPolymer extends PolymerElement {
PolymerElement firstPolymer, secondPolymer, currentPolymer;
Element container;
ContainerPolymer.created() : super.created();
void enteredView() {
super.enteredView();
container = $['container'];
}
void first(Event e, var detail, Node target) {
showFirst(false);
}
void firstPrepared(Event e, var detail, Node target) {
showFirst(true);
} …有没有办法用它的父模板包围聚合物子模板？
在以下示例中,shadow标记将父模板带入子视图,但它忽略了其内容:
母体聚合物元素
<polymer-element name="my-window">
<template>
<div class="windowframe">
<p>test</p> <!-- can be shown with shadow tag -->
<content></content> <!-- cannot be used with shadow tag -->
儿童聚合物元素
<polymer-element name="my-window-example" extends="my-window">
<template>
<!-- get the hosts' shadow and insert here -->
<shadow>
<p>Here is the content of my window<p> <!--won't be shown -->
</shadow>
</template>
我打算在AngularJS中尝试一个项目,其中所有组件都将使用Polymer开发.在开始这个项目之前,我有几个问题:
在使用Angular服务获取数据后,我是否可以更新Polymer组件数据模型(也可以通过UI)？如果是,那么尽可能分享一个例子.
我可以从Polymer组件内部调用Angular服务来获取数据吗？(比方说,我有一个User Control作为Polymer组件,用于通过针对MongoDB的Angular Services验证用户凭证)？
如果可能,请分享一个例子.
我的最终目标是不必像这样编写HTML:
<div id='counter'>
{{counter}}
</div>
<div>
<button
id="startButton"
on-click="{{start}}">
Start
</button>
<button
id="stopButton"
on-click="{{stop}}">
Stop
</button>
<button
id="resetButton"
on-click="{{reset}}">
Reset
</button>
</div>
我想知道是否可以在不使用HTML的情况下创建Polymer-element.例如我试过这个:
@CustomTag('tute-stopwatch')
class TuteStopWatch extends PolymerElement {
ButtonElement startButton,
stopButton,
resetButton;
@observable String counter = '00:00';
TuteStopWatch.created() : super.created() {
createShadowRoot()..children = [
new DivElement()..text = '{{counter}}',
new DivElement()..children = [
startButton = new ButtonElement()..text = 'Start'
..onClick.listen(start),
stopButton = new ButtonElement()..text = 'Stop'
..onClick.listen(stop),
resetButton = new ButtonElement()..text = 'Reset'
..onClick.listen(reset)
]
];
}
}
以前的代码正确创建HTML和影子根,但它不会创建@observable …
(对不起,我无法提供任何我要问的代码,因为我真的不知道从哪里开始.)
我非常有兴趣在我的网络应用程序中创建这样的平滑过渡(特别是配置文件图片从一个活动到另一个活动的那个),但我想知道如何使用html做到这一点？
简而言之,HTML是否已准备就绪(任何代码/文档都会受到赞赏)？我们应该等一些聚合物工具来做这件事吗？或者我们应该在网上不这样做？
我们正在考虑使用聚合物技术(和飞镖语言)来开发公共/互联网Web应用程序/网站.在测试/验证方法时,我们遇到了潜在的阻塞.(基本)站点在不同的浏览器和平台上表现相当不错,但在Windows 8.1上的Internet Explorer 11上速度极慢.
问题似乎与我们的特定代码无关,因为使用例如聚合物演示(菜单按钮)重现行为似乎很容易:https: //www.polymer-project.org/components/paper-元件/ demo.html#纸菜单按钮
在IE11(11.0.9600.17351)上,加载该页面需要16秒以上.使用IE11的"UI响应"分析器,创建了一个.diagsession文件:http://novonov.be/tmp/polymer-paper-menu-button-demo.diagsession 乍一看,问题似乎没有关联网络流量/要下载的文件数.在"DOM事件(readystatechanged)"中花费了15.73秒.我们没有测试IE的另一个版本 - 只有IE11.
是否有针对此问题的解决方案/解决方法？或者这个问题是否会使用聚合物组件创建的网站/网络应用程序无法在IE(11)中以合理的性能运行？这可能是公共互联网网站/网络应用程序的一个显示器.
我正在写一个小应用程序,它有一个基于弹簧支架的后端和一个基于聚合物飞镖的前端.
目前我正在努力从登录机制接收会话ID ...
最初我计划使用它HeaderHttpSessionStrategy并使用它来对spring-session/redis会话存储进行身份验证以启用水平扩展.
问题是Spring安全性总是在登录后和dart HttpRequest类(来自html包)中执行重定向,并且在重定向之后,来自初始响应的头字段当然不再存在/可访问.我试图为客户端禁用followRedirect,但看起来这只适用于IO包HttpRequest.
然后我尝试切换到CookieHttpSessionStrategy但看起来dart httprequest不会在浏览器cookie后端存储收到的cookie: - /
这应该是一个简单的问题,但我在这里有点迷失.这不是那么难......
当我使用例如intellij rest客户端时,一切正常,我可以从cookie或头字段中提取会话ID ...
有任何想法吗？: - /
dart ×10
dart-polymer ×10
polymer ×5
angular-dart ×1
angularjs ×1
css ×1
html ×1
shadow-dom ×1
spring ×1