Dart在编辑器升级后删除不允许的属性

我在SDK 0.7.3.1_r27487中升级了我的dart编辑器后遇到错误“删除不允许的属性”.

我有一个自定义标签,其模板包含boostarp属性“data-target”和“data-toggle”.它在先前版本下工作但升级后遇到错误.

安慰

Removing disallowed attribute <A data-toggle="dropdown">
Removing disallowed attribute <BUTTON data-target=".navbar-collapse">
Removing disallowed attribute <BUTTON data-toggle="collapse">

.HTML代码

<element extends="div" name="x-navbar" constructor="Navbar">
<template>    
  ..
  <a name="top" href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
  ..
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
</template>
<script type="application/dart" src="custom_ui.dart"></script> 
</element>

解决方法

您可能正在使用 Element.innerHtml.您应该使用 Element.setInnerHtml.

正如您可以看到这个新方法的参数,HTML代码现在已经过验证和过滤.要恢复旧行为,您必须提供允许所有属性的验证程序或树清理程序.

要明确允许锚点和按钮上的“数据”：

// Call NodeValidatorBuilder.allowX() methods to customize the validator.

final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common()
  ..allowElement('a',attributes: ['data-target','data-toggle'])
  ..allowElement('button','data-toggle']);

query('#anElement').setInnerHtml('a content',validator: _htmlValidator);

Element和CustomElement类在几个地方使用HTML清理(Element.html factory,innerHtml属性,createFragment方法……).

即使您不在自己的代码中直接使用这些方法,它们也会被底层Dart库调用(CustomElement类是为polymer库创建的,但也被最新版本的Web UI库使用).

目前,没有办法全局禁用或自定义默认的清理规则.所以我猜你将不得不处理setInnerHtml调用…或等待另一个SDK版本来解决问题(“data-”属性是有效的HTML5代码,但默认的清理过滤器不允许它们以及内联样式：为什么这些属性被认为是不安全的？).

注意：您应该将switching from Web UI to Polymer视为Web UI is now deprecated.