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

Question

我在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>

Answer 1

你可能正在使用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', attributes: ['data-target', 'data-toggle']);

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

Element和CustomElement类在几个地方(Element.html工厂,innerHtml财产,createFragment方法......)使用HTML清理.

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

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

注意:您应该考虑从Web UI切换到Polymer,因为Web UI现已弃用.