当对象更改时，Polymer 1.0数据绑定 [英] Polymer 1.0 Data binding when object changes

问题描述

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

在索引页面上，我有一个对象(从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对象，那就是，它立即反映在模板上. /p>

当我迁移到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，可根据该对象的属性更改大小和颜色

解决方案

如果要修改对象或数组中的元素，则需要使用突变帮助器功能，否则dom-repeat不会收到有关更改的通知(检查文档):

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

I'm having trouble understanding how data-binding works now.

On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like:

<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);

This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems object reflects position and size of each desktop module for each user).

Now, users used to be able to change their configuration on the go, and on Polymer 0.5 I had no problem with that, just changed my maintemplate.menuitems object and that was that, it was reflected on the template instantly.

As I migrated to Polymer 1.0, I realized changes on an object wouldn't change anything visible, it's much more complicated than this, but just doing this doesn't work:

<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';
}

The object changes but nothing happens on the screen until I save it to DB and reload the page.

Am I missing something /Do I need to do something else on Polymer 1.0 to have elements update when I change an object passed as a property?

Before you ask, I've got those properties setted as notify: true, it was the inly thing I found different, but still doesn't work

Thanks for reading!

EDIT:

this is the code menuitems is used in:

<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 is just set of divs which changes size and color based on this object properties

解决方案

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数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！