标签: dart-polymer

我不知道如何 :host(:hover)父自定义元素的子自定义元素是工作的。有人可以解释如何使这项工作？

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="my-li" extends="li">
  <style>
      :host(:hover){
      color: red;
    }
  </style>
  <template>
    <content></content>
  </template>
  <script type="application/dart" src="todoitem.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
import "dart:html" as html;

import 'package:logging/logging.dart';

final Logger _widgetlogger = new Logger("todo.item");

@CustomTag('my-li')
class MyListElement extends html.LIElement with Polymer, Observable {

  factory MyListElement() => new html.Element.tag('li', 'my-li');

  MyListElement.created() : super.created() {
    polymerCreated();
  }

  @override
  void attached() {
    super.attached();
    _widgetlogger.info("todoitem attached");
  }

  @override
  void detached() {
    super.detached();
    _widgetlogger.info("todoitem detached");
  } …

我最近遇到了一些使用抽象类作为接口的例子，但也向抽象接口添加了工厂构造函数，因此它可以在某种意义上被“更新”。例如：

abstract class WidgetService {
    factory WidgetService() = ConcreteWidgetService;

    Widget getWidget();
    void saveWidget(Widget widget);
}

class ConcreteWidgetService extends BaseWidgetService implements WidgetService {

    WidgetService();

    Widget getWidget() {
        // code to get widget here
    }

    void saveWidget(Widget widget) {
        // code to save widget here
    }
}

此服务的使用将在其他一些服务或组件中，如下所示：

WidgetService _service = new WidgetService();

根据我对这个示例的理解，上面的行基本上会“新建”一个 WidgetService，它通常会从 Dart 分析器中产生一个警告，并且所说的服务变量实际上是一个基于 ConcreateWidgetService 分配给WidgetService 的工厂构造函数。

这种方法有好处吗？根据我的 OOP 经验，当我不知道我将获得的具体类型时，我使用抽象类/接口进行编程。在这里，我们似乎立即将具体类型分配给抽象工厂构造函数。我想我的第二个问题是在这种情况下为什么不直接在这里使用 ConcreteWidgetService 而不是重复所有方法签名？

我在Polymer元素中显示国际化字符串,如下所示:

<div>
  <span class="title">{{title}}</span>
  <br/><br/>
  <span class="subtitle">{{subtitle1}}</span>
  <br/>
  <span class="content">{{paragraph1}}</span>
  <br/><br/>
  <span class="subtitle">{{subtitle2}}</span>
  <br/>
  <span class="content">{{paragraph2}}</span>
</div>

...并有以下飞镖码:

@observable String title;
@observable String subtitle1;
@observable String paragraph1;
@observable String subtitle2;
@observable String paragraph2;

//...

void onUpdateLocale(_locale) {
  title = getTitle();
  subtitle1 = getSubtitle1();
  paragraph1 = getParagraph1();
  subtitle2 = getSubtitle2();
  paragraph2 = getParagraph2();
}

//...

getTitle() => Intl.message('MY TITLE', name:'title',
    desc: 'This is my title',
    args: [],
    examples: {'None' : 0});
getSubtitle1() => Intl.message('Subtitle 1', name:'subtitle1',
    desc: 'This is my first …

我在Polymer元素中显示国际化字符串,如下所示:

<div>
  <span class="content">{{myContent}}</span>
</div>

...并有以下飞镖码:

@observable String myContent;

//...

void onUpdateLocale(_locale) {
  myContent = getMyContent();
}

//...

getMyContent() => Intl.message('All my content ...', name:'myContent',
    desc: 'This is my content',
    args: [],
    examples: {'None' : 0});

然而; 当Google抓取应用时,它只会提取"{{myContent}}"而不是其内插值,即实际的国际化内容.有没有办法解决这个问题,并制作一个国际化的Polymer.dart应用程序,它也是SEO友好的？

HTML 5具有新的数据属性data-*

鉴于以下用法:

   <ul>
     <li data-animal-type="bird">Owl</li>
     <li data-animal-type="fish">Salmon</li> 
     <li data-animal-type="spider">Tarantula</li> 
   </ul>

我怎么能在Dart中访问这些属性.

我正在使用Dart Polymer的重复模板来显示列表项.现在,我想实现一个搜索过滤器,其中只显示与输入的搜索词相关的项目.请考虑以下代码:

我-element.html

<polymer-element name="my-element">
  <script type="application/dart" src="my-element.dart"></script>
  <template>
    <input type="text" value="{{ searchTerm }}">
    <ul>
      <template repeat="{{ item in items }}">
        <template if="{{ matchesSearchFilter(item) }}">
          <li>{{ item }}</li>
        </template>
      </template>
    </ul>
  </template>
</polymer-element> 

我-element.dart

@CustomTag('my-element')
class MyElement extends PolymerElement {
  @observable List<String> items = toObservable(["Monday", "Tuesday", "Wednesday"]);
  @observable String searchTerm = '';

  MyElement.created() : super.created();

  matchesSearchFilter(String item) {
    if (searchTerm.isEmpty) return true;
    return item.toLowerCase().contains(searchTerm.toLowerCase());
  }
} 

例如,当我在文本框中键入"Mo"时,我希望项目列表会自动更新,这样只显示"星期一".但是,在键入任何搜索词时,列表保持不变,并忽略搜索词.

那么,如何正确实现这样的功能呢？

在对类似问题的回答中,这已经超过一年了,我读到了在Dart(和聚合物 - 飞镖)中使用数据绑定禁用按钮的简单方法.

我当前的代码如下所示:

HTML:

...
<button id="btnPointDown" on-click="{{decrement}}" disabled="{{points == 0}}">\/</button>
...

.dart:

...
@published int points = 0;

void increment() {
  points++;
}

void decrement() {
  points--;
}
...

然而Dart似乎不再对残疾元素"聪明"了.

如何使用最新的Dart和Polymer来禁用使用数据绑定的按钮(或者如果不可能以编程方式)？

当我有一个由a生成的元素的引用时<template>,在Polymer.js中,这样的元素有一个属性templateInstance,提供对它的模板的引用,就像它在这里使用的那样:

https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286

以下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>

具体来说,应该在哪里包含链接,应该应用什么样的应用程序设置,模板中的样式应该是什么.

有没有办法用它的父模板包围聚合物子模板？

在以下示例中,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>