इंजेक्शन बाउंड HTML() के बराबर पॉलिमर 1.0 क्या है?पॉलिमर 1.0 - इंजेक्टबाउंड HTML() वैकल्पिक
(यानी एक पॉलिमर तत्व के भीतर नोड्स के लिए HTML तार जोड़कर और डेटा बाइंडिंग संकल्प वाले)
एक JSbin उदाहरण - http://jsbin.com/jufase/edit?html,output
संपादित करें: पर्याप्त अतः अभी तक मेरे अपने जवाब को स्वीकार करने के cred की जरूरत नहीं है, लेकिन यह कहीं नीचे नीचे होना चाहिए। टी एल; डॉ - का उपयोग करें "डोम-बाँध" टेम्पलेट्स
बाइंडिंग डिफ़ॉल्ट रूप से गुण हैं, और हाइफ़न पूंजीकरण निरूपित करने के लिए इस्तेमाल किया जा सकता:
<element inner-h-t-m-l="{{prop}}"></element>
ऐसा लगता है कि यह वास्तव में एक समर्थित सुविधा अभी तक नहीं है , @kevinpschaaf से टिप्पणियों को देखकर: https://github.com/Polymer/polymer/issues/1778
डोम-बाइंड का उपयोग करके, मुझे अपने उपयोग के मामले को पूरा करने में सक्षम होना चाहिए, उदाहरण के लिए http://jsbin.com/caxelo/edit?html,output
हालांकि तकनीकी ज्ञान के अनुसार यह वास्तव में अभी तक समर्थित नहीं है। निम्नलिखित चाल चल रहा है।
function injectBoundHTML(html, element) {
var template = document.createElement('template', 'dom-bind');
var doc = template.content.ownerDocument;
var div = doc.createElement('div');
div.innerHTML = html;
template.content.appendChild(div);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(Polymer.Base.instanceTemplate(template));
}
अपने HTML पहले से ही तो की तरह कुछ का उपयोग पार्स गया था, तो "doc.importNode (sourceNode, सच);" आंतरिक HTML प्राप्त करने/स्थापित करने के बजाय।
प्रोटोटाइप के लिए धन्यवाद दोस्तों जो मैंने अपनी जरूरतों के लिए अपडेट किया है: पॉलिमर में मार्कअप जेनरेट करें, क्योंकि डोम-रिपैट इस ऑपरेशन को करने में असमर्थ था। खोज इंजन के लिए
टैग: पॉलिमर पीढ़ी गतिशील गतिशील मार्कअप कस्टम तत्व डोम-दोहराने डोम दोहराने balise dynamique dynamiquement
http://jsbin.com/wiziyeteco/edit?html,output
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
</head>
<body>
<dom-module id="x-test">
<template>
<div id="container"></div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-test',
ready: function() {
// Declare custom elements
var customElements = [
{name:'paper-button', title:'A'},
{name:'paper-button', title:'B'},
{name:'paper-button', title:'C'},
{name:'paper-button', title:'D'},
];
// Declare auto-binding, as we are at the root HTML document
var domBind = document.createElement('template', 'dom-bind');
domBind.customElements = customElements;
var domBindDocument = domBind.content.ownerDocument;
// Declare custom elements
for (var i in domBind.customElements) {
var item = domBind.customElements[i];
var elem = domBindDocument.createElement(item.name);
elem.setAttribute('raised', 1);
elem.innerHTML = item.title;
domBind.content.appendChild(elem);
}
// Append to #container
this.$.container.appendChild(domBind);
}
});
</script>
<x-test></x-test>
</body>
</html>
हालांकि यह करता बाँध "सहारा", यह अभी भी रूप में उत्पादन renders एक शाब्दिक स्ट्रिंग, और एचटीएमएल के भीतर किसी भी बाइंडिंग का समाधान नहीं किया जाता है। http://jsbin.com/woxato/edit?html,output – techknowledgey