在聚合物中将值从后端传递到前端答案

【问题标题】：Pass values from backend to frontend in polymer在聚合物中将值从后端传递到前端
【发布时间】：2015-03-04 20:13:39
【问题描述】：

我正在使用 Google App Engine 和 Polymer 构建一个网络应用程序。

在使用聚合物之前，我曾经使用 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，但我找不到用我后端的值填充这些的方法。

【问题讨论】：

polymer-project.org/components/core-docs/index.html#core-ajax 是一种选择。另一种方法是在元素返回数据时进行 ajax 调用并填充您的元素。

标签： python google-app-engine polymer jinja2 template-engine

【解决方案1】：

Polymer 中的数据绑定非常简单。使用聚合物表达式，例如

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 对象中定义：

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

 ready: function() { ... }
});

【讨论】：