Polymer 聚合物1.0';阵列样式';路径访问器,表达式中括号表示法的替代方法

Polymer 聚合物1.0';阵列样式';路径访问器,表达式中括号表示法的替代方法,polymer,polymer-1.0,Polymer,Polymer 1.0,聚合物1.0文档说明: 路径语法不支持数组样式的访问器(例如 用户[0]。名称)。但是,您可以直接在路径中包含索引 (users.0.name) 如何在动态设置路径时绕过此问题,并使用Polymer 0.5获得与以下示例相同的行为?这特别是在为对象定义的模型生成表单的上下文中 <template repeat="{{row in fieldset.rows}}"> <div layout horizontal flex> <template repeat="

聚合物1.0文档说明:

路径语法不支持数组样式的访问器(例如 用户[0]。名称)。但是,您可以直接在路径中包含索引 (users.0.name)

如何在动态设置路径时绕过此问题,并使用Polymer 0.5获得与以下示例相同的行为?这特别是在为对象定义的模型生成表单的上下文中

<template repeat="{{row in fieldset.rows}}">
<div layout horizontal flex>
    <template repeat="{{field in row}}" flex>
        <paper-field field="{{model.fields[field]}}" value="{{obj[field]}}">
        </paper-field>
    </template>
</div>
</template>

编辑: Per:

没有短期计划支持这一点。Polymer 0.5有一个用于绑定的复杂表达式解析器,为了简单性和性能,我们取消了它。今天,您可以使用其他模式来实现类似的结果,这只需要您更加明确


实现双向数据绑定的替代模式尚不清楚。

您可以进行计算绑定


聚合物({
...
_computeArrayValue:函数(数组、索引){
返回数组[索引];
},
...
});

是的,Polymer 1.0确实不再支持绑定表达式中的
myObject[key]
。然而,在您的特定用例中,有一些方法可以避免这个问题

单向数据绑定 当涉及到单向数据绑定时,克服此限制相当简单。只需使用同时接受对象和密钥的计算属性:


getValue:function(对象,键){
返回obj[键];
}
双向数据绑定 在双向数据绑定的情况下,仍然可以创建一个函数替代Polymer 1.0中的绑定表达式
{{{obj[key]}}
。但是,它需要考虑您希望实现绑定的特定用例

考虑到问题中的示例,您似乎正在处理某种表或字段集。出于本例的目的,我将使用稍微不同但非常相似的结构

假设我们有一个
字段集
对象,该对象的结构如下:

{
“字段”:[
{“name”:“name”,“prop”:“name”},
{“姓名”:“电子邮件”,“道具”:“电子邮件”},
{“姓名”:“电话”;“道具”:“电话”}
],
“行”:[
{
“姓名”:“约翰·多伊”,
“电子邮件”:jdoe@example.com",
“电话”:“(555)555-1032”
},
{
“姓名”:“Allison Dougherty”,
“电子邮件”:“polymer.rox”。1337@example.com",
“电话”:“(555)555-2983”
},
{
“名字”:“迈克”和“派克”,
“电子邮件”:verypunny@example.com",
“电话”:“(555)555-7148”
}
]
}
如果我们想创建某种类似表的输出来表示这个对象,我们可以使用两个嵌套的重复模板:第一个用于迭代不同的行,第二个用于迭代不同的字段。使用上面提到的单向数据绑定替代方案将非常简单

然而,在这种情况下,实现双向数据绑定是非常不同的。它是如何做到的

为了理解如何提出解决方案,以一种有助于我们确定应该实现什么样的观察流的方式来分解这个结构是很重要的

当您将
字段集
对象可视化为如下所示时,它就变得简单了:

字段集
-->行(0,1,…)
-->划船
-->字段(姓名、电子邮件、电话)
-->价值观
当您考虑到元素/应用程序的工作流时,它会变得更加简单

在本例中,我们将构建一个简单的网格编辑器:

+---+------+--------+-------+
||姓名|电子邮件|电话|
+---+------+--------+-------+
|0 | xxxx | xxxxxx | xxxxx|
+---+------+--------+-------+
|1 | xxxx | xxxxxx | xxxxx|
+---+------+--------+-------+
|2 | xxxx | xxxxxx | xxxxx|
+---+------+--------+-------+
有两种基本的方式可以让数据在这个应用程序中流动,由不同的交互触发

  • 预先填充字段值:这很容易;我们可以使用前面提到的嵌套模板轻松完成这一点

  • 用户更改字段值:如果我们查看应用程序设计,我们可以推断,为了处理此交互,无论我们使用什么元素作为输入控件,它都必须有某种方式知道:

    • 它将影响
    • 它所代表的字段
因此,首先让我们创建一个重复模板,该模板将使用一个新的自定义元素,我们将其称为
基本字段


-
[[项目名称]]
[[rowIndex]]
(在上面的代码片段中,您会注意到我还添加了一个单独的重复模板来生成列标题,并为行索引添加了一列—这对我们的绑定机制没有影响。)

现在我们已经完成了,让我们创建
基本字段
元素本身:


聚合物({
是:'基本字段',
特性:{
行:{
类型:对象,
通知:正确
},
字段:{
类型:对象
},
价值:{
类型:字符串
}
}
});
我们不需要从元素本身内部修改元素的字段,因此
字段
属性没有
notify:true
。但是,我们将修改行的内容,因此在
row
属性上有
notify:true

但是,该元素尚未完成:在其当前状态下,它不做任何设置或获取其值的工作。如前所述,该值取决于行和字段。让我们添加一个多属性观察者