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

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

如果要修改对象或数组中的元素，则需要使用突变辅助函数，否则dom-repeat 将不会收到有关更改的通知（请查看docs）：

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