Inject html в полимере, включая привязку данных

У меня есть доверенный html-файл с привязкой к данным, который я хочу включить в веб-компонент. Я попробовал несколько способов включить html-файл, но привязка данных не работает , Я знаю, что полимер не будет маркировать html, потому что он становится уязвимостью для атак XSS из ненадежных источников, но у меня есть надежный источник.Inject html в полимере, включая привязку данных

Я уже в курсе 1 и 2 и опробовал сочный-HTML, iron-ajax с inner-h-t-m-l, а также функцией injectBoundHTML.

Есть ли другой способ, чем привязать все к одному?

Файл, который я хочу включить, содержит поля ввода и является предопределенной формой.

источник

2016-10-06 aphex

Вы можете использовать Templatizer, создав <template> вручную и настроив его содержимое. Важной частью является то, что вы не можете просто установить innerHTML

Polymer({ 
 
    is: 'my-elem', 
 
    behaviors: [ Polymer.Templatizer ], 
 
    ready: function() { 
 

 
    var template = document.createElement('template'); 
 
    
 
    // you must prepare the template content first (with bindings) 
 
    var templateContent = document.createElement('div'); 
 
    templateContent.innerHTML = 'First: <span style="color: red">[[person.first]]</span> <br> Last: <span style="color: green">[[person.last]]</span>'; 
 
    
 
    // and cannot simply set template's innerHTML 
 
    template.content.appendChild(templateContent); 
 
    
 
    // this will process your bindings 
 
    this.templatize(template);   
 
    var person = { 
 
     first: 'Tomasz', 
 
     last: 'Pluskiewicz' 
 
    }; 
 
    var itemNode = this.stamp({ person: person }); 
 
    
 
    Polymer.dom(this.root).appendChild(itemNode.root); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.19/webcomponents.min.js"></script> 
 
    <link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html" /> 
 
    </head> 
 

 
    <body> 
 
    <my-elem> 
 
    </my-elem> 
 
     
 
    <dom-module id="my-elem"> 
 
     <template> 
 
     </template> 
 
    </dom-module> 
 
    </body> 
 

 
</html>

источник

2016-10-06 10:21:50

Я опробовал свой фрагмент, и он работает. Связывание данных внутри шаблона работает. Можно ли штамповать сложные объекты? Также нет привязки данных к внешним элементам. Штамповка только в одном направлении. var itemNode = this.stamp ({i: this.data}); data = { name = "Alex" } – aphex

Да, вы можете связать любой объект (см. Обновление). Двусторонняя привязка возможна, но сложна. См. Этот мусор: http://jsbin.com/kipato/edit?html,js,output –

Благодарим вас за примеры. Теперь привязка данных работает :) Вы знаете, как передавать и события? Поля запускают события, но внешний контекст их не видит. – aphex

Inject html в полимере, включая привязку данных

ответ

Смежные вопросы