gpt4 book ai didi

javascript - polymer 1.0 : Two-way bindings with input elements

转载 作者:可可西里 更新时间:2023-11-01 01:45:20 26 4
gpt4 key购买 nike

代码

考虑以下 Polymer 自定义元素:

<dom-module id="test-element">

<template>
<input type="text" value="{{value}}">
<button>Reset</button>
</template>

<script>
Polymer({
is: 'test-element',
properties: {
'value': {
type: String,
reflectToAttribute: true,
notify: true,
value: null
}
}
});
</script>

</dom-module>

我在我的 index.html 中使用这个自定义元素如下:

<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="test-element.html">
<title>Test App</title>
</head>
<body>
<test-element value="test"></test-element>
</body>
</html>

问题

我相信我已经将 value 属性声明为双向绑定(bind) (notify: true);然而,当我点击输入并输入一些文本(比如 "foo")时,它并没有反射(reflect)在模型中(即调用 document.querySelector('test-element ').value返回我在index.html中设置的值,"test")。有趣的是,输入的 value 属性正确更改,但我的测试元素的 value 属性没有。我错过了什么?

我还应该注意到,对 document.querySelector('test-element').setAttribute('value', 'bar') 的调用可以正常工作。

最佳答案

首先注意 notifyreflectToAttribute value 上的字段属性告诉它如何对它的父项作出 react ,而不是如何绑定(bind)到一个子项。

IOW,notify: true意味着制作value可从外部而非内部进行双向绑定(bind)。 reflectToAttribute: true告诉 Polymer 写 value每次更改时都指向一个属性(不利于性能)。

当你像 <x-element foo="{{value}}"> 这样的绑定(bind)时,它是 x-element 决定是否 foo是双向可绑定(bind)的。

原生元素,如 input没有内置的双向绑定(bind)支持,而是使用 Polymer 的事件观察器语法来双向绑定(bind)到输入。像这样 <input value="{{value::change}}"> .

这告诉 Polymer 更新 this.value来自 input.value每当 input触发 change事件。

关于javascript - polymer 1.0 : Two-way bindings with input elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30835341/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com