Question

我正在尝试创建自定义表单元素，我试图在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);

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”：false， “validateFunction”： “onlyText” }， { “姓名年龄”， “类型”：“号码”， “尺寸”： “3”， “readyOnly”：false， “validateFunction”： “onlyNumber” } ]

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

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

Answer 1

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

ad 2） HTMLElement不会自动执行任何操作。因此，如果你想访问你的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, '"'));
}

请注意，在form-data json中有＆＃39;而不是＆＃34;。因此，我们必须在使用JSON.parse之前替换它们。

Answer 2

看起来这是使用网络组件而不是聚合物组件。本机Web组件API不包括数据绑定，尽管有角度和聚合物都可以（但以不同的方式实现）。

原生Web组件和聚合物组件可与Angular以及其他框架一起使用。

根据您使用的是Angular.js（1）还是Angular（2+），设置要传递到DOM的数据对象会有所不同，但一般来说数据应该“设置”可以这么说在JS中并传入DOM。否则，正如@daKmoR所说，数据需要像他在他的例子中那样声明。

如果需要，有些软件包可以帮助实现聚合物数据绑定和角度绑定之间的数据双向绑定。

特雷

聚合物 - 在其他项目中使用自定义元素，如angular和Java jsp

2 个答案: