Question

如何在Polymer中绑定动态路径？

例如：假设我们的组件有2个属性：

list：一组对象。
map：一个映射子对象的javascript对象。

列表中的每个项目都有一个属性key，这是从map属性获取值的关键。我想“动态”绑定像map[item.key]这样的路径。执行此类操作的唯一方法是创建一个函数，但不会在更改map的属性和子属性时触发它。 = /

在下面的代码段中，您可以看到，通过单击按钮，它将使用map.key2方法动态地将对象放在Polymer.Element.set属性中。但这不会触发任何更改，因为Polymer不绑定路径。它只执行一次显示功能。 所以这Stackoverflow answer无效（即使问题相同）。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="employee-list.html">
<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">
<link rel="import"  href="https://polygit.org/components/polymer/lib/elements/dom-repeat.html">


<dom-module id="my-element">

	<template>
		<ul>
			<template is="dom-repeat" items="[[list]]">
				<!--Bind something like this-->
				<li> [[ _getAt(item.key) ]] </li>
			</template>
		</ul>

		<!--This button will add the 2nd object-->
		<paper-button on-tap="_onButtonClicked" raised>Add key 2</paper-button>
	</template>

	<script>
		class MyElement extends Polymer.Element {
			static get is(){
				return "my-element";
			}

			static get properties(){
				return {
					list : {
						type : Array,
						value : function () {
							return [
								{
									key : "key1",
									// ...
								},
								{
									key : "key2",
									// ...
								},
								// ...
							]
						}
					},
					map : {
						type : Object,
						value : function () {
							return {
								key1 : {
									message : "Hello",
									// ...
								},
								// ...
							}
						}
					}
				};
			}

			_onButtonClicked(){
				// Add the 2nd object
				this.set("map.key2", {
					message : "World",
				});
        
			  console.log("key 2 added");
			}
      
      _getAt(key){
        if (this.map[key])
          return this.map[key].message;
      }
		}

		customElements.define(MyElement.is, MyElement);
	</script>
</dom-module>

<my-element></my-element>

Polymer documentation表示可以在数组中构建路径。但我没有找到将字符串数组绑定为路径的方法。

Answer 1

＆＃34;做这样的事情的唯一方法是创造一个功能，但它不会在更改属性和子属性时触发地图＆＃34;

您可以通过传递正在更改的对象/属性来完成此工作。基本示例

这不会更新：

<template is="dom-repeat" items="[[_getItems()]]"></template>

这将更新：

<template is="dom-repeat" items="[[_getItems(list)]]"></template>

现在，dom-repeat将在房产列表中重新开始发布＆＃39;变化。假设您有2个属性，并且当其中一个属性发生更改时，您希望重新运行dom-repeat：

<template is="dom-repeat" items="[[_getItems(list, somethingElse)]]"></template>

您可能还想查看https://www.polymer-project.org/1.0/docs/devguide/model-data#override-dirty-check

编辑：

您在哪里更新房产列表？ dom-repeat不会再次运行，直到该属性发生变化

DOUBLE EDIT：

试试这个（多字母目前有服务器问题）：

＆＃13;

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="employee-list.html">
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/components/polymer/lib/elements/dom-repeat.html">


<dom-module id="my-element">

    <template>
		<ul>
			<template is="dom-repeat" items="[[list]]">
				<!--Bind something like this-->
				<li> [[ _getAt(item.key, map, list) ]] </li>
			</template>
    	</ul>

    <!--This button will add the 2nd object-->
    <paper-button on-tap="_onButtonClicked" raised>Add key 2</paper-button>
    </template>

    <script>
        class MyElement extends Polymer.Element {
            static get is() {
                return "my-element";
            }

            static get properties() {
                return {
                    list: {
                        type: Array,
                        value: function() {
                            return [{
                                    key: "key1",
                                    // ...
                                },
                                {
                                    key: "key2",
                                    // ...
                                },
                                // ...
                            ]
                        }
                    },
                    map: {
                        type: Object,
                        value: function() {
                            return {
                                key1: {
                                    message: "Hello",
                                    // ...
                                },
                                // ...
                            }
                        }
                    }
                };
            }

            _onButtonClicked() {
                var foo = this.list;

                this.set("map.key2", {
                    message: "World",
                });
              	this.set("list", {});
              	this.set("list", foo);
                console.log("key 2 added");
            }

            _getAt(key) {
                if (this.map[key])
                    return this.map[key].message;
            }
        }

        customElements.define(MyElement.is, MyElement);
    </script>
</dom-module>

<my-element></my-element>

＆＃13;

Polymer - 如何绑定动态路径？

1 个答案: