It doesn't work well with dynamic template. how can we solve the problem? about materialize-meteor HOT 11 OPEN

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.

from materialize-meteor.

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.

from materialize-meteor.

@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.

from materialize-meteor.

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

from materialize-meteor.

@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.

from materialize-meteor.

@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 ? 😄

from materialize-meteor.

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.

from materialize-meteor.

@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

from materialize-meteor.

@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!

from materialize-meteor.

@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?

from materialize-meteor.

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 ?

from materialize-meteor.