Polymer 聚合-在其他项目（如angular和JavaJSP）中使用自定义元素_Polymer

Polymer 聚合-在其他项目（如angular和JavaJSP）中使用自定义元素

polymer

Polymer 聚合-在其他项目（如angular和JavaJSP）中使用自定义元素,polymer,Polymer,我正在尝试创建自定义表单元素，并尝试在Java的angular和jsp页面中开发的其他应用程序中重用该元素 my-element.js： class MyElement extends HTMLElement { // This gets called when the HTML parser sees your tag constructor() { super(); // always call super() first in the cto

我正在尝试创建自定义表单元素，并尝试在Java的angular和jsp页面中开发的其他应用程序中重用该元素

my-element.js：

    class MyElement extends HTMLElement {
      // This gets called when the HTML parser sees your tag
      constructor() {
        super(); // always call super() first in the ctor.
        this.msg = 'Hello, World!';
      }
      // Called when your element is inserted in the DOM or
      // immediately after the constructor if it’s already in the DOM
      connectedCallback() {
        this.innerHTML = `<form action="/action_page.php">
      <div class="container">
        <label><b>Name</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

       <label><b>Age</b></label>
        <input type="text" placeholder="Enter Age" name="age" required>


        <div class="clearfix">
          <button type="button"  class="cancelbtn">Cancel</button>
          <button type="submit" class="signupbtn">Add</button>
        </div>
      </div>
    </form>`;
      }
    }
    // This registers your new tag and associates it with your class
    window.customElements.define('my-element', MyElement);

MyElement类扩展了HtmleElement{
//当HTML解析器看到您的标记时，将调用此函数
构造函数（）{
super（）；//始终在构造函数中首先调用super（）。
this.msg=‘你好，世界！’；
}
//在将元素插入DOM或
//如果构造函数已经在DOM中，则紧跟在构造函数之后
connectedCallback（）{
this.innerHTML=`
名称
年龄
取消
添加
`;
}
}
//这将注册新标记并将其与类关联
define（'my-element'，MyElement）；

my-element.html：

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
    <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
    <script src="my-element.js"></script>
    <!-- <link rel="import" href="add-form.html"> -->

</head>
<body>
<my-element></my-element>

</body>
</html>

下面是我正在努力解决的两个问题

1.我是否可以将以下两个文件包含到angular和java jsp页面中，并使用自定义标记来工作

<link rel="import" href="my-element.html">
<script src="my-element.js"></script>

 <my-element></my-element>

我尝试将下面的json对象作为属性传递给自定义表单元素，并尝试呈现自定义表单元素

[ { “名称”：“名称”， “类型”：“文本”， “大小”：“20”， “readyOnly”：错误， “validateFunction”：“onlyText” }, { “姓名”：“年龄”， “类型”：“编号”， “大小”：“3”， “readyOnly”：错误， “validateFunction”：“onlyNumber” } ]

我尝试使用下面的方法将json数据注入到自定义元素中，以呈现基于json的表单元素，但没有运气，也没有控制台错误

<my-element form-data="{{data}}"></my-element>

ad 1）是的，您可以将您的元素用于您想要的每个服务器系统。它的“只是html”，它的美：）

广告2） HtmleElement不会自动执行任何操作。因此，如果您希望访问json，您必须执行以下操作

<my-element form-data="{'name': 'Name', 'type': 'text'}""></my-element>

connectedCallback() {
  let rawData = this.getAttribute('form-data');
  let jsonData = JSON.parse(rawData.replace(/'/g, '"'));
}

看起来这是在使用网络组件，而不是聚合物组件。原生web组件API不包含数据绑定，尽管angular和polymer都包含数据绑定（但实现方式不同）
原生web组件和聚合物组件可以与Angular以及其他框架一起使用
根据您使用的是Angular.js（1）还是Angular（2+），设置要传递到DOM的数据对象会有所不同，但一般来说，数据应该在js中“设置”并传递到DOM。否则，正如@daKmoR所说，需要像他在示例中所做的那样声明数据
如果需要，有一些包可以帮助在polymer的数据绑定和angulars绑定之间实现数据双向绑定
Trey
我创建了plunker-并且在错误下面得到了-UncaughtTypeError:（中间值）。connectedCallback不是HtmleElement的函数。connectedCallback（我的元素.js:10）哦，是的，对不起HtmleElement
本身没有connectedCallback。。。（如果您正在扩展Polymer.Element，我只是习惯于这样称呼它）[我编辑了答案]谢谢@dakmoR，它可以工作，但有一个问题，我看到的是将json变量传递给表单数据属性，如form data=“jsonVariable”，而不是传递json对象。那么，您的数据如何以及在哪里可用？如果它在jsp中可用，您很可能会像我之前写的那样使用它。。。如果你有js中的数据，那么它取决于它是如何定义的。。。所以需要更多的上下文来给出答案……数据来自json格式的RESTAPI服务