What are the rules for using jquery to manipulate the DOM?

@midget2000x wrote:

I'm having a really hard time with this one. Something that used to be very simple is taking me ages to figure out. I know it's because I haven't gotten over the hump with ember yet. Just getting a bit frustrated. I think there's probably a more "ember" way to do this - but I have no idea what it is.

The issue: I have a long list of <li> 's. I only want to show the first 10, and have a "show more" link that toggles the rest of the list viewable (and changes text to "Show fewer"). I have this working just fine, but when the model refreshes, the "Show more" jquery stuff no longer works. I have no idea why. The click does nothing. No errors. It's like the jquery vanishes.

My component code looks like this:

import Ember from 'ember';

let $ = Ember.$;

export default Ember.Component.extend({

	didInsertElement() {
		this._super(...arguments);
		Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
	},

	afterRenderEvent() {
	    $(".showToggle").click(function() {
	    	$('#' + $(this).data("bucket-id") + " .hidden").toggleClass("hide-hidden show-hidden");
	    	$(this).text($(this).text() === "Show More" ? "Show Fewer" : "Show More");
	    });
	}
});

My component template looks like this. I am using the truth-helper to add css classes on the items that are to be toggled:

<style>
	.hide-hidden { display: none; }
	.show-hidden { display: block; }
</style>

<ul id="{{filter_key}}">
{{#each filter_values as |value index|}}
	<li class="{{if (gte index 10) 'hidden hide-hidden'}}"><a href="#" {{action 'whatever'}}>{{value.key}} ({{value.count}})</a></li>
{{/each}}
</ul>
<a href="#" class="showToggle" data-bucket-id="{{filter_key}}" >Show More</a>

This renders out to:

<ul id="filter_size_jewelry">
	<li><a href="#" data-ember-action="" data-ember-action-493="493">4 (309)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-495="495">4.5 (306)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-497="497">5 (321)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-499="499">5.5 (313)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-501="501">6 (324)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-503="503">6.5 (314)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-505="505">7 (324)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-507="507">7.5 (313)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-509="509">8 (330)</a></li>
	<li><a href="#" data-ember-action="" data-ember-action-511="511">8.5 (304)</a></li>
	<li class="hidden hide-hidden"><a href="#" data-ember-action="" data-ember-action-513="513">9 (457)</a></li>
	<li class="hidden hide-hidden"><a href="#" data-ember-action="" data-ember-action-515="515">9.5 (248)</a></li>
	<li class="hidden hide-hidden"><a href="#" data-ember-action="" data-ember-action-517="517">10 (257)</a></li>
</ul>
<a href="#" data-bucket-id="filter_size_jewelry" class="showToggle">Show More</a>

Posts: 1

Participants: 1

Read full topic