聚合物 - 使用自定義元素一樣的角度和Java JSP

我想創建而我試圖在Java中聚合物 - 使用自定義元素一樣的角度和Java JSP

的角度和jsp頁面

我-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);

我-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「 }， { 」名「：」年齡「，「類型」：我用下面的方式來注入JSON數據試圖「onlyNumber」 } ]

：「數字」，「大小」：「3」，「readyOnly」：假，「validateFunction」自定義元素將基於JSON，但沒有運氣表單元素和沒有控制檯錯誤

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

來源

2017-06-02 Naga Sai A

廣告1）是的，你可以用你想每一個服務器系統中使用你的元素。這是「只是html」，它的美麗:)

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, '"')); 
}

注意，在表單數據JSON有「，而不是」。因此，我們必須使用JSON.parse之前更換它們。

來源

2017-06-03 18:34:42 daKmoR

我創建plunker - http://plnkr.co/edit/cPMeMCE0F5jDEMqLEaJ1並獲得以下錯誤 - 未捕獲的類型錯誤：（中間值）.connectedCallback不是函數在HTMLElement.connectedCallback（我的元件.js：10） –

哦耶對不起'HTMLElement'沒有connectedCallback本身......（我只是習慣像你應該調用它，如果你正在擴展Polymer.Element）[我編輯了答案] – daKmoR

thanks @ dakmoR，它的工作原理但有一個問題，我看到的是將json變量傳遞給form-data =「jsonVariable」這樣的form-data屬性，而不是傳遞JSON對象 –

它看起來這是使用相對於聚合物組分一個Web組件。本機Web組件API不包括數據綁定，雖然角和聚合物兩者做（但以不同的方式實現）。

本地Web組件並且聚合物組件可以與Angular以及其他框架一起使用

根據您使用的是Angular.js（1）還是Angular（2+），設置要傳遞到DOM的數據對象會有所不同，但通常應該「設置」數據以便在JS中說話並傳入DOM。否則，如@ daKmoR所說，數據將需要像他在他的例子中那樣被聲明。

有一些軟件包可以幫助實現聚合物的數據綁定和angulars綁定之間的數據雙向綁定（如果需要的話）。

特雷

來源

2017-06-03 21:32:14

聚合物 - 使用自定義元素一樣的角度和Java JSP

回答

相關問題