It doesn't work well with dynamic template. how can we solve the problem?

[vega-soft]

in template

ul class="collapsible">
{{#each pendingMembers}}
li
....
/li
{{/each}}
/ul

in Template.templateName.rendered , $('.collapsible').collapsible({ "accordion" : false });

Collapsible doesn't work in this case.
I had to use setTimeout like below to wait some time until dynamic markup is completed.

Template.admin.rendered = function() {
Meteor.setTimeout(function(){
$('.collapsible').collapsible();
},1000)
}

Any Intelligent solution for this?
ABOVE solution doesn't work when pendingMembers are changed from real-time update by other user.

[Sivli-Embir]

There is currently no easy way to solve this but here is what you can do (its ugly):

<template name='myCollapsible'>
  <ul class="collapsible">
    {{#each pendingMembers}}
      {{> myLi}}
    {{/each}}
  </ul>
</template>

<template name='myLi'>
  <li>
  ....
  </li>
</template>

Template.myLi.rendered = function () {
  $('.collapsible').collapsible();
}

Now every time it is updated it will run.

[ctaloi]

I've been struggling with a similar issue, but my collection loses it's "reactivity"(a change to the collection is no longer live) whenever I run $('.collapsible').collapsible();. Seems to occur if it's run from the primary template or the nested (or myLi). Any idea what I'm missing?

Template.downNodes.helpers({
  nodes: function () {
    alerts = SolarwindsAlerts.find({"node_status": "DOWN"});
    return alerts
  }
});

Template.nodeList.rendered = function () {
  $('.collapsible').collapsible();
};

<template name="downNodes">
    <h6 class="flow-text center right-align blue-grey-text">Solarwinds Events ({{getPublishedCount 'outageCount'}})</h6>
    <ul class="collapsible" data-collapsible="accordion">

    {{#each nodes}}
        {{> nodeList}}
    {{/each}}

    </ul>
</template>

<template name="nodeList">
        <li>
            <div class="waves-effect waves-yellow flow-text collapsible-header white-text red accent-2">{{node_name}}
                <i class="mdi-social-whatshot"></i>
                <span class="secondary-content white-text em">{{livestamp date}}</span>
            </div>

            <div class="collapsible-body">
                <p>
                    <h5>{{node_name}}</h5>
                    <h5>{{node_ipaddress}}</h5>
                    <a class="waves-effect btn waves-light blue" href="http://solarwinds.wcs.com/Orion/NetPerfMon/NodeDetails.aspx?NetObject=N:{{_id}}" target="_blank">
                        <i class="mdi-action-exit-to-app">Solarwinds</i>
                    </a>
                </p>
            </div>
        </li>
</template>

I've been digging for a solution - but haven't had much luck.

[Sivli-Embir]

@ctaloi can you get me a repository with the issue? It would be much easier to figure out if I had something to work with. If not give me a bit.

@d0minikk sorry for taking over this thread. I am working on https://github.com/meteor-useraccounts/materialize so I am quite deep in this right now.

[ctaloi]

@Kestanous wish I could - but sorry, I can't.. I can probably put something together.... let me know, thank you !

[Sivli-Embir]

@ctaloi I have to say I am impressed! Yes it is actually removing them from the DOM. Don't run collapsible from the code and add:

  Template.nodeList.destroyed = function () {
    console.log('no more')
  };

Then in your browser console run: $('.collapsible').collapsible();

I need to think about this for a while. We may need to take this to the source.

[ctaloi]

@Kestanous You are correct.

Removed collapsible from the code, reloaded - then ran $('.collapsible').collapsible(); from browser console resulted in

> $('.collapsible').collapsible();
[Log] no more (downNodes.js, line 14)

Now what ? 😄

[Dogfalo]

Hey guys, creator of materialize here. we are looking in to ways to improve compatibility with Angular and Meteor. Will be monitoring this thread. Feel free to pitch ideas to make development with meteor/materialize easier.

[Sivli-Embir]

@Dogfalo awesome to see you in Meteor land, thanks for stoping by!

I am not sure what is happening now, yet, but I do know it is removing elements from Blazes control. If I had to guess, and it is a guess, I blame this: https://github.com/Dogfalo/materialize/blob/master/js/collapsible.js#L18

[Sivli-Embir]

@Dogfalo as a side note have you seen issue #15? We are going to need you or your teem to approve that at some point. Once implemented we will get your latest code in a Meteor ready way without anyone doing any work!

[vega-soft]

@Dogfalo , Welcome on meteor.

The main topic here is that materialize is not working for dynamically added elements in the DOM.

E.g In collapsible, it's working for 3 <li>elements (pre loaded).
For one <li> element newly added in the dom, i have to run the $('.collapsible').collapsible(); again.
And this solution is really ugly.

Can this be fixed in materialize libary?

[delachurch]

Hi everyone,
I'm facing the exact same issue as described. is there a more elegant workaround (or fix) than just running the $('.collapsible').collapsible(); again ?