Polymer 1.0 Data binding when object changes

问题

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

回答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');
}

来源：https://stackoverflow.com/questions/30844532/polymer-1-0-data-binding-when-object-changes

标签

migration

polymer

polymer-1.0