2015-03-04 4 views
0

Я создаю веб-приложение с помощью Google App Engine и Polymer.Значения переходов от backend до frontend в полимере

Перед использованием полимера я использовал, чтобы передать свои значения в интерфейсе с помощью jinja2 шаблонов:

def render_str(self, template, **params): 
    t = JINJA_ENV.get_template(template) 
    return t.render(params) 

def render(self, template, **kw): 
    self.write(self.render_str(template, **kw))) 

-

{% for note in notes %} 
<div class="note"> 
    <div>{{note.title}}</div> 
    <div>{{note.created}}</div> 
</div> 
{% endfor %} 

Это прекрасно работает на главной странице, но все импортированные полимерные файлы из объем этих переданных значений.

Как передать значения из моего бэкэнда в мои полимерные формы? Есть ли способ получить импортированные файлы из полимеров в той же области, что и моя главная страница, или есть альтернативный механизм шаблонов, который я мог бы использовать? Я видел, что у полимера есть свой templating and data binding, но я не смог найти способ заполнить их значениями из моего бэкэнда.

+0

http://www.polymer-project.org/components/core-docs/ index.html # core-ajax - один из вариантов. Другое дело - сделать ajax-вызовы и заполнить ваши элементы, когда они вернут данные. –

ответ

0

Связывание данных довольно просто в Полимере. Используйте выражения полимера, например.

var testString = "Hello" 

<div id="test" class="test">{{testString}}</div> 

document.getElementById("test").testString = "Whats up?"; 

Чтобы передать значение с вашей главной страницы на компонент, вы можете использовать модель атрибуции, например.

<my-polymer-component id="test" mydata="Hello" /> 

<polymer-element attributes="mydata ..."> 

или просто назначить его самого элемента Polymer:

document.getElementById("test").mydata = "Whats up"; 

переменные являются автоматически заселена в полимерный элемент. Чтение из него будет такой же - до тех пор, они подвергаются на самом или даже элемента, определенного в реальном объекте Polymer:

Polymer('my-polymer-component', { 
mydata: 'foo', 

ready: function() { ... } 
}); 
Смежные вопросы