Separate events with different dataset values repeat leading to event logic errors- Any ideas?

help
1

Hey fellow meteorites!

I’m very stumped right now. Trying to use a template event that then uses javascript’s dataset (in this case … data-rule) to update a reactive variable which serves as data for a dynamic child template. For some strange (but probably explainable reason) different click events with different dataset values repeat values for $(event.target).data(‘rule’). This throws off all my event logic. Here’s my code to explain the above situation:

 //--THE HTML THAT IS AFFECTED BY MY TEMPLATE EVENTS.
<li class="rule add-rule" data-rule="rule1">Rule1</li>
<li class="rule add-rule" data-rule="rule2">Rule2</li>
<li class="rule add-rule" data-rule="rule3">Rule3</li>
<li class="rule add-rule" data-rule="rule4">Rule4</li>

  //--THE EVENT 
  'click .add-rule' : function(event,template){
    event.preventDefault();
    let ruleId = $(event.target).data('rule');
    //**** RULEID REPEATS FOR SOME EVENTS THROWING OFF ENTIRE HELPER LOGIC
    let newRule = {
      "ruleType" : ruleId
    }
    let rulesSet = template.rulesSet.get();
    rulesSet.push(newRule);
    let rulesUnset = _.reject(template.rulesUnset.get(), (rule,index)=>{
      return rule.ruleType === ruleId
    });
    template.rulesSet.set(rulesSet);
    template.rulesUnset.set(rulesUnset);
  }
     //--PARENT TEMPLATE CALL TO DYNAMIC CHILD TEMPLATE
      <div class="col-md-6">
        {{> Template.dynamic template="rules_active" data=activeRules}} //activeRules = template.rulesSet.get();
      </div>

//--RULES ACTIVE DYNAMIC CHILD TEMPLATE--
<template name="rules_active">
  <ul>
    {{#if arrayNotEmpty this}} //  arrayNotEmpty is helper method from UI.RegisterHelper
      {{#each this }}
        <li class="rule remove-rule">{{ruleType}}</li>
        {{/each}}
    {{/if}}
  </ul>
</template>

Any ideas here ? For the life of me, I can’t figure out what’s going on.
Really appreciate any input.

Thank you.
Alex

2

The usual way to fix this is to put your <li> items in their own template (one per template instance).

So instead of (say):

{{#each thing}}
  <li class="rule add-rule" data-rule="rule{{ruleid}}">Rule{{ruleid}}</li>
{{/each}}

Do something like:

{{#each thing}}
  {{> ruleItem ruleid=ruleid}}
{{/each}}

Where ruleItem contains the <li>. Then put your click events on the ruleItem template.

1 Like
3

Thank you so much for your reply - you are a hero. So this means scrapping reactive-vars and switching to Session variables? Because doesn’t this mean the ruleItem template could only communicate with the parent via Session variables ? Thank you again so much :slight_smile: Alex

4

@robfallows
Hey Rob I actually changed around my structure and implemented according to your suggestion but unfortunately the same problems are coming. I have four rules and there are only two data-rules properties for all four (two are repeating.) I forgot to mention that I am using this plugin https://github.com/VinceG/twitter-bootstrap-wizard as a wizard so all these logic and views are one step of the wizard. Do you think it’s possible the wizard plugin is interfering in some way ?? I’m still really stumped right now.

5

Why does the child template need to communicate with the parent? I’m probably just not understanding what you’re trying to do here.

Maybe. I’m not familiar with that or what that’s doing under the covers, but if you have anything which is running DOM query/manipulation independently of Blaze it’s definitely a possibility.

6

@robfallows Why does the child template need to communicate with the parent? I’m probably just not understanding what you’re trying to do here.

Basically I have two panes that present active and inactive rules (now both Set to Session Variables) - on the click event the two sets of rules must update accordingly and be reactive to client.

@robfallows Maybe. I’m not familiar with that or what that’s doing under the covers, but if you have anything which is running DOM query/manipulation independently of Blaze it’s definitely a possibility.

I will have to dig deeper I suppose. It’s too bad there is a lot of conflict with blaze and existing javascript plugins. I’ve run into this before and it’s oftentimes very hard to debug.

Thanks again.
Alex

7

@robfallows In case you are curious after struggling for hours and hours I found out that dataset attributes can be cached. So when I initialized my jquery plugin in the onRendered hook and was accessing data via $(event.target).data('rule), it was using cached data not necessarily pulling from the updated DOM. I fixed this by using $(event.target).attr(‘data-rule’) which only pulls from live DOM (so I’m told.) What a weird bug I tell you… but thought I would let you know! Thanks for your input - because of your help have a better structure to my templates :slight_smile:

1 Like