如何包含AlloyUI

Question

我在Liferay Portlet中遇到了一些麻烦，包括AlloyUI。 在article之后，我生成了以下jsp：

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining

<aui:script>
YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.CharCounter(
      {
        counter: '#counter',
        input: '#some-input',
        maxLength: 10
      }
    );
  }
);
</aui:script>

但渲染的页面如下所示：

我确保在web.xml：

中正确定义了taglib

<taglib>
    <taglib-uri>http://liferay.com/tld/aui</taglib-uri>
    <taglib-location>/WEB-INF/tld/aui.tld</taglib-location>
</taglib>

当我将它包含在jsp中时，AUI确实有效，如下所示：

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui/aui-min.js" rel="stylesheet"></link>


<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining

<script>
YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.CharCounter(
      {
        counter: '#counter',
        input: '#some-input',
        maxLength: 10
      }
    );
  }
);
</script>

我使用Liferay 6.1.20 EE GA2

Answer 1

Liferay使用在Yahoo UI（也称为alloy-ui）库之上开发的yui（也称为AUI）库。

这两个库的实例术语不同，即Alloy-UI为AUI，另一个为YUI。

在代码中替换这些字词可以解决您的问题，即AUI代替YUI。

Answer 2

种子文件声明是您访问此类字符计数器代码的AlloyUI所需的全部内容。

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>

您不应该在web.xml中使用taglib引用。实际上，您禁止访问种子文件。您引用的taglib可能与预期的AlloyUI版本不一致。

此外，访问YUI的CharCounter也没关系。请参阅http://alloyui.com/api/classes/A.CharCounter.html上的API示例。