MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Details about Nunjucks templating system?

    Scheduled Pinned Locked Moved Development
    11 Posts 4 Posters 6.6k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J Offline
      j.e.f.f Project Sponsor Module Developer
      last edited by

      I’m really excited to start using the templating system for my modules, but the Hello World example is not really detailed enough to learn from. For example, when new data is available, how does the template get updated? Is it automatic whenever its data model is updated? Is it triggered manually through an equivalent to the updateDom() function?

      Has anyone started using the templating system? Is there any documentation available aside from docs specifically for Nunjucks? Are there any gotchas I should know about?

      Thanks!

      • Jeff
      strawberry 3.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @j.e.f.f
        last edited by

        @j.e.f.f I didn’t had a look yet, but maybe you want to have a look into the refactor of the weather modules where the nunjuck idea was born https://github.com/MichMich/MagicMirror/tree/weather-refactor/modules/default/weather

        Please create a github issue if you need help, so I can keep track

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          j.e.f.f Project Sponsor Module Developer @strawberry 3.141
          last edited by

          @strawberry-3.141 I ended up just diving in and figuring it out. I spent some time rewriting MMM-MyCalendar to use the Nunjucks templating system. Here’s what I’ve learned:

          • The screen update is triggered using the updateDom() function, just like other modules
          • When updateDom() is called, so is getTemplateData() which refreshes the data model provided to the template
          • The screen often seems to physically update even if the DOM contents have not changed, which is different behaviour from modules using the old getDom() routine. I’m wondering if Nunjucks injects something into the template that makes each update distinctly different in the markup…
          • Updates on the screen seem to take a second or so longer than the old way of doing things. A screen update will result in a moment of black even if you have not specified a fade duration (i.e. updateDom() vs updateDom(200))

          Generally I really like the templating system. Makes tweaking the UI so much easier than wading through a bunch of document.createElement statements. If you’ve used Nunjucks before you’ll feel right at home and wonder what took so long for this feature to be implemented :)

          Just to give you an idea of what to expect, here is what the template looks like for MMM-MyCalendar now. Much less code and way easier to read.

          0_1520972259329_Screen Shot 2018-03-13 at 8.17.15 PM.png

          1 Reply Last reply Reply Quote 4
          • cowboysdudeC Offline
            cowboysdude Module Developer
            last edited by

            Little late to this party but I agree the Hello World example is well not really a good example.

            So I’m playing around with it …

            J 1 Reply Last reply Reply Quote 0
            • J Offline
              j.e.f.f Project Sponsor Module Developer @cowboysdude
              last edited by

              @cowboysdude After having used it with my calendar module, I’ve since abandoned this and reverted to the JavaScript generated DOM like before. I’ve found that if the module is hidden, then it doesn’t always update properly. I’m not sure if this is a Nunjucks behaviour issue or a bug with MM, but in either case I haven’t found a way to work around it.

              I had theorized that I could have some kind of event watcher that monitored when the module became visible, and have it trigger a DOM update, but I never got around to exploring that.

              Hopefully you get further than I did. To get familiar with how Nunjucks works, this page is your friend:
              https://mozilla.github.io/nunjucks/templating.html

              Good luck! And if you experience my issue and a way to work around it, I’d love to hear how you did it! I’d still love to use a templating system instead of JS generated DOM.

              strawberry 3.141S 1 Reply Last reply Reply Quote 1
              • strawberry 3.141S Offline
                strawberry 3.141 Project Sponsor Module Developer @j.e.f.f
                last edited by

                @j-e-f-f did you try to call updateDom in the resume hook of your module?

                Please create a github issue if you need help, so I can keep track

                J 1 Reply Last reply Reply Quote 0
                • J Offline
                  j.e.f.f Project Sponsor Module Developer @strawberry 3.141
                  last edited by

                  @strawberry-3-141 I forgot that that hook even existed! Maybe I can give that a try, but I wonder it means I’ll have stale data… if the module is suspended, does that mean it doesn’t respond to socket notifications from the helper, or even send socket notification to trigger a data pull?

                  S 1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @j.e.f.f
                    last edited by

                    @j-e-f-f said in Details about Nunjucks templating system?:

                    if the module is suspended, does that mean it doesn’t respond

                    no… it just doesn’t get called at getDom()… least thats how my modules see it…
                    you can’t present new info unless the getDom() method is called

                    your module can call updateDom() to request the callback at getDom(), but you are suspended… so the callback never happens

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    J 1 Reply Last reply Reply Quote 0
                    • J Offline
                      j.e.f.f Project Sponsor Module Developer @sdetweil
                      last edited by

                      @sdetweil ok sounds like that’s the ticket then. I’m going to try updating DarkSky with the template system and see how it behaves. Will report back when I know more.

                      1 Reply Last reply Reply Quote 1
                      • J Offline
                        j.e.f.f Project Sponsor Module Developer
                        last edited by

                        OK I’ve got a version of MMM-DarkSkyForecast using the Nunjucks templating system. Seems to be working well… will run it for a few days to observe. Funny thing is I didn’t need to put anything in the resume() hook… it just… works.

                        You can see my work here:
                        https://github.com/jclarke0000/MMM-DarkSkyForecast/tree/templated

                        I original ran into the problem with my calendar module, which does a DOM update for each configured calendar, which results in a burst of DOM updates… I wonder if the issue has to do with frequent successive DOM updates.

                        1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy