Question

我无法理解数据绑定现在的工作原理。

在我的索引页面上，我有一个对象（从RESTful服务获得JSON），在应用于自定义元素时效果很好：

<main-menu class="tiles-container ofvertical flex layout horizontal start" 
     menuitems="{{menuitems}}">
</main-menu>

var maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems = JSON.parse(data.GetDesktopResult);

这可以正常工作，当我用不同的用户加载我的页面时，主菜单会更改，因为它应该显示每个用户的桌面配置。（此menuitems对象反映每个用户的每个桌面模块的位置和大小。）

现在，用户以前可以随时更改其配置，而在Polymer 0.5上我没有遇到任何问题，只是更改了我的maintemplate.menuitems对象，就是这样，它立即反映在模板上

当我迁移到Polymer 1.0时，我意识到对象的更改不会改变任何可见的东西，它比这复杂得多，但只是这样做不起作用：

<paper-icon-button id="iconback" icon="favorite" onClick="testing()"></paper-icon-button>

function testing(){
   debugger;
   maintemplate = document.querySelector('#fulltemplate');
   maintemplate.menuitems[0][0].ModuleSize = 'smamodule';
}

对象发生变化但屏幕上没有任何反应，直到我将其保存到数据库并重新加载页面。

我错过了什么/当我更改作为属性传递的对象时，我是否需要在Polymer 1.0上执行其他操作才能更新元素？

在你提问之前，我已将这些属性设置为notify: true，这是我发现不同的内容，但仍然不起作用

感谢阅读！

编辑：

这是代码menuitems用于：

<template is="dom-repeat" items="{{menuitems}}" as="poscol">
   <div class="positioncolum horizontal layout wrap flex">
       <template is="dom-repeat" items="{{poscol}}" as="mitem" index-as="j">
           <main-menu-item class$="{{setitemclass(mitem)}}"
               mitem="{{mitem}}"
               index="{{mitem.TotalOrder}}"
               on-click="itemclick"
               id$="{{setitemid(index, j)}}">
           </main-menu-item>
       </template>
   </div>
</template>

main-menu-item只是一组div，可根据此对象属性更改大小和颜色

Answer 1

You need to use the mutation helper functions if you want to modify elements inside an object or array otherwise dom-repeat won't be notified about the changes (check the docs):

function testing(){
   debugger;
   maintemplate = document.querySelector('#fulltemplate');
   this.set('maintemplate.0.0.ModuleSize', 'smamodule');
}

Polymer 1.0对象更改时的数据绑定

1 个答案: