如果readonly标志设置为true,则不会触发事件更改

时间:2018-02-13 11:06:05

标签: javascript polymer polymer-1.0

我在我的子元素中使用readonly配置。但我也已将notify配置为true。但是,当更新子(my-subelement)时,我的父元素和子元素中的值不会更新。如果readonly标志设置为false,这可以正常工作。 如何为只读属性触发事件。

//my-element.html
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../my-subelement/my-subelement.html">

<dom-module id="my-element">
<template>
    <div class="div-content">
        <div class="data-content">
            String Value 
            <my-subelement id="subelement" input-value="{{inputValue}}">
            </my-subelement>
        </div>
        <div class="data-content">
            String Data: <input type="text" value={{inputValue::input}}>
        </div>
        <div class="data-content">
            The string value is: <span>{{inputValue}}</span>
        </div>
    </div>         
</template>
<script>
    Polymer({
        is: 'my-element',
        properties: {
            inputValue: {
                type: String,
                value: function() {
                    return 'Test';
                }
            }
        }
    });
</script>
</dom-module>


//my-subelement.html
<link rel="import" href="../../../polymer/polymer.html">

<dom-module id="my-subelement">
<template>
    <h1>
        <div class="data-content">
            String Data: <input type="text" value={{inputValue::input}}>
        </div>
        <div class="data-content">
            The string value is: <span>{{inputValue}}</span>
        </div>
    </h1>
 </template>
 <script>
    Polymer({
        is: 'my-subelement',
        properties: {
            inputValue: {
                type: String,
                notify: true,
                readOnly: true
            }
        }
    });
</script>
</dom-module>

请通过示例代码段帮助我理解

由于

0 个答案:

没有答案