CODEWITHSUNDEEP
polymerpolymer-1.0
wesleywh
wesleywh

Reputation: 1261

Polymer 1.0+ notify true not working

I am not sure what is going on in my code here and could use some pointers as to what might be happening.

A little background...

I want to have "pizza" pass its changes to "selectedItem" when anything in "pizza" changes.

Now for the code:

The following is my child element js:

Polymer({
  is:"order-pizza-mod",
  behaviors: [
    Polymer.NeonSharedElementAnimatableBehavior
  ],
  properties: {
    mobile: {
      observer: "screenSizeChanged"
    },
    pizza: {
      notify: true,
      observer: "selectedPizza"
    },
....
  addToOrder: function () {  //this is the function that will need to update my parent element.
    this.set("pizza.ADD",true);
    this.fire('selectPage',4);
    console.log("SENT CHANGES");
    console.log(this.pizza);
  },
....

The following is my parent elements HTML and JS:

HTML:

<neon-animated-pages id="pages" selected="[[selected]]" class="overflow-catch">
        ...
    <!-- 7 --><order-pizza-mod pizza="{{selectedItem}}"></order-pizza-mod>
        ...
</neon-animated-pages>

JS:

Polymer({
  is:"page-order",
  behaviors: [
    Polymer.NeonSharedElementAnimatableBehavior
  ],
  properties: {
...
    selectedItem: {
      observer:"selectionChanged"
    },
  },
....
  selectionChanged: function () {
    console.log("YAY, got all the things!");
  },
....

Any ideas as to what might be going on?

Upvotes: 0

Views: 1155

Answers (2)

Scott Miles
Scott Miles

Reputation: 11027

Instead of this

properties: {
  selectedItem: {
    observer:"selectionChanged"
  }
}

do this

observers: [
  'selectionChanged(selectedItem.*)'
]

The problem is that selectedItem is only considered changed if references an entirely new object. But you are trying to observe changes to properties of selectedItem, which requires you to observe selectedItem.*.

Upvotes: 1

wesleywh
wesleywh

Reputation: 1261

So I found a solution but it isn't very nice.

The problem resides here:

this.set("pizza.ADD",true);

Currently there is an open issue with polymer that "this.set" function does not trigger notify. I also tried "notifyPath" as well and that doesn't work. The only thing that I found to force polymer to trigger notify is to reassign the variable to a new object like this:

addToOrder: function () {  //this is the function that will need to update my parent element.
    this.pizza = {'ADD': true,
                  'CODE':this.pizza.CODE,
                  'GARNISHES':this.pizza.GARNISHES};

    this.fire('selectPage',4);
    console.log("SENT CHANGES");
    console.log(this.pizza);
},

This is messy but works with forcing polymer to notify a data bound variable. Now if anyone knows a better way of doing this please let me know.

Upvotes: 1

Related Questions