聚合物数据绑定json对象

时间:2017-03-09 10:15:56

标签: json binding polymer

我遇到了使用json对象进行聚合物双向绑定的问题

使用简单的var,2路绑定的输入绑定工作\ o /

使用对象{{message.from}}例如: - >输入修改变量{{message.from}},没问题

但是:

如果在函数中我修改了var message.from输入中没有填充此更改

输入未刷新

由于

<template>

    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">

    </style>

    <div class="vertical layout center-justified">

        <div>
            <div>{{session.user.name}}</div>
            <div>{{session.user.id}}</div>
        </div>


        <div class="horizontal layout center-justified">
            <paper-button on-click="envoi" style="margin-top:20px;">
                <iron-icon icon="send" item-icon></iron-icon>
                VALIDER</paper-button>
        </div>
    </div>
</template> 


<script>
addEventListener('WebComponentsReady', function() {
        Polymer({
            is: "creation-dossier",
            properties: {
               session: {
                    type: Object,
                    value: function() { 
                        return { 
                            user: { 
                                name: "rob",
                                id: 1 
                            } 
                        }; 
                    }
                }
            },
            envoi: function(){
               console.log('this.session.user.name '+ this.session.user.name);
               console.log('this.session.user.id   '+ this.session.user.id);
               this.session.user.name = "coucou2";
               this.session.user.id = 0;
               console.log('this.session.user.name '+ this.session.user.name);
               console.log('this.session.user.id   '+ this.session.user.id);
            }
        });
});
</script>

1 个答案:

答案 0 :(得分:0)

这是因为聚合物不会观察到子属性的变化。 如果你有这样的财产

session{value:10}

如果你this.session = 20;,它将通过双向绑定自动反映到UI。

对于子属性更改,您可以像这样使用notifyPath

`envoi: function(){
    this.trail = 20;
    console.log('this.session.user.name '+ this.session.user.name);
    console.log('this.session.user.id   '+ this.session.user.id);
    this.session.user.name = "coucou2";
    this.session.user.id = 0;
    console.log('this.session.user.name '+ this.session.user.name);
    console.log('this.session.user.id   '+ this.session.user.id);
    this.notifyPath('session.user.name', this.session.user.name);
    this.notifyPath('session.user.id', this.session.user.id);
 },`

或另一种方式是使用dirty-checking这样的

`envoi: function(){
    this.trail = 20;
    console.log('this.session.user.name '+ this.session.user.name);
    console.log('this.session.user.id   '+ this.session.user.id);
    this.session.user.name = "coucou2";
    this.session.user.id = 0;
    console.log('this.session.user.name '+ this.session.user.name);
    console.log('this.session.user.id   '+ this.session.user.id);
    var temp = this.session;
    this.session = [];
    this.session = temp;
 },`

第三种方式就是像这样使用set     this.set('session.user.name','some name');