Код
Рассмотрим следующий пользовательский элемент 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
как двухстороннее связывание (notify: true
); но когда я нажимаю на ввод и набираю текст (например, "foo"
), он не отражается в модели (т.е. вызов document.querySelector('test-element').value
возвращает значение, установленное в index.html, "test"
). Интересно, что атрибут value
ввода изменяется правильно, но свойство value моего тестового элемента не работает. Что мне не хватает?
Я также должен отметить, что вызов document.querySelector('test-element').setAttribute('value', 'bar')
работает правильно.