CODEWITHSUNDEEP
javascriptmeteorpolymer
Linus
Linus

Reputation: 948

Avoid updating of local client

I'm trying to use Polymer with Meteor, but there are some problems with elements that have a toggle state, for example the paper-checkbox, if you make the state reactive.

The paper-checkbox is a fancier version of a regular checkbox. It alternates between two states checked and unchecked. If you tap the checkbox an polymer event fires and the state is toggled.

The problem arises when you make the checkbox state reactive. You'll get a race condition between Polymer and Meteor. Polymer just toggles the checkbox state to the opposite of the current state and Meteor sets the element state based on the value in the collection.

So depending on which event wins the race the checkbox is set to the right state or is toggled again and is therefore displayed in the wrong state. The state in the collection is always the correct one, but the frontend display gets messed up.

Here is my template code:

<template name="task">
  <paper-checkbox class="toggle-checked" {{isChecked}}></paper-checkbox>
  <span class="text">{{text}}</span>
</template>

and the according events & helpers:

Template.task.events({
  "click .toggle-checked": function (e) {
    // Set the checked property to the opposite of its current value
    Meteor.call("setChecked", this._id, ! this.checked);
  }
});

Template.task.helpers({
  isChecked: function () {
    return this.checked ? 'checked' : 'unchecked'; 
  }
});

Meteor.methods({
  setChecked: function (taskId, setChecked) {
    var task = Tasks.findOne(taskId);
    Tasks.update(taskId, { $set: { checked: setChecked} });
  })
});

Is there a way to prevent meteor of updating the local client after the Task.update() call, but keep reactivity for other clients in tact?

Upvotes: 0

Views: 78

Answers (1)

sbking
sbking

Reputation: 7680

Try changing your event handler like this:

Template.task.events({
  "change .toggle-checked": function (e) {
    var checked = e.currentTarget.checked;
    if (checked !== this.checked) {
      Meteor.call("setChecked", this._id, checked);
    }
  }
});

Upvotes: 2

Related Questions