Importing tpl inside another tpl


  • Plugin & Theme Dev

    Let say i´m on topic.tpl and i want to include the content from recent.tpl on a sidebar
    what is the best approach?
    doing <!-- IMPORT recent.tpl --> won't work, no results, only the template with no topics of course
    if i try to import it on a tpl with the topics loop (like unread.tpl) it works but with same topics results

    any help?



  • Did you tried ../TEMPLATENAME.tpl?


  • Plugin & Theme Dev

    @AOKP said:

    Did you tried ../TEMPLATENAME.tpl?

    what do you mean


  • GNU/Linux

    I guess the best approach would be to define a widget area and create your recent.tpl as a widget.
    But I have no experience in NodeBB themes...


  • Community Rep

    This works. XD

    require(['translator'], function (translator) {
      $.getJSON('/api/recent', function (json) {
        templates.parse('recent', json, function (html) {
          translator.translate(html, function (translated) {
            $(translated).appendTo('body');
          });
        });
      });
    });
    


  • @exodo well. Where is your topic.tpl file located at?
    For example, if it is inside of a folder, you can use <!-- IMPORT ../recent.tpl --> to call it.

    "../" means to go a directory back.


  • Plugin & Theme Dev

    @yariplus said:

    This works. XD

    require(['translator'], function (translator) {
      $.getJSON('/api/recent', function (json) {
        templates.parse('recent', json, function (html) {
          translator.translate(html, function (translated) {
            $(translated).appendTo('body');
          });
        });
      });
    });
    

    that works very good , thank you :D

    @AOKP said:

    @exodo well. Where is your topic.tpl file located at?
    For example, if it is inside of a folder, you can use <!-- IMPORT ../recent.tpl --> to call it.

    "../" means to go a directory back.

    template loaded fine, locating the path is not the problem, problem was the topic results, using persona fork
    @yariplus got a query solution


  • Community Rep

    Thanks. That's actually more of a hack though, because you will doing two requests per page load.

    Although that will work, I think the better solution is more complex.

    You'll want to hook into the controller filter for the page in which you want the additional template, and append the new data for rendering. If you are importing a template that has any variables with the same name in the base template, you'll need to create a new template that has the additional data namespaced.

    e.g.

    your library.js

    var Theme = module.exports = {};
    var topics = require.main.require('./src/topics');
    // filter:topic.build
    Theme.topicBuild = function(data, next){
      topics.getTopicsFromSet('topics:recent', data.req.uid, 0, 5, function(err, recentData) {
        data.templateData.recent = recentData;
        next(null, data);
      });
    };
    

    add to your topics.tpl

    <!-- IMPORT recentembed.tpl -->
    

    in recentembed.tpl, copy recent.tpl but prefix the variables with your recent namespace

    <!-- BEGIN recent.topics -->
    {recent.topics.title}
    <!-- END recent.topics -->
    



    There may be a way to explicitly declare the namespace too that I'm not aware of, something like
    <!-- IMPORT recent.tpl USING recent -->
    which would eliminate the need for an additional template if it exists.


  • Plugin & Theme Dev

    @yariplus
    thanks again, will try it that way
    the main idea was to have a panel on topic to quickly access that category topics, recent was just an example
    of course will need to be a custom template , don't want pagination breadcrumbs etc on that panel

    just a little example with your previous hack code

    alt text


  • Admin

    @yariplus said:

    There may be a way to explicitly declare the namespace too that I'm not aware of, something like
    <!-- IMPORT recent.tpl USING recent -->
    which would eliminate the need for an additional template if it exists.

    Hm. That's not a bad idea tbh. I might consider adding that in


  • Community Rep

    @exodo Cool! That's a great idea.

    You could actually keep it like that if you are loading my code only when the button press or swipe happens, because it would also update the list.

    require(['translator'], function (translator) {
      $('button.topics-panel').click(function(){
        $.getJSON('/api/recent', function (json) {
          templates.parse('yourtemplate', json, function (html) {
            translator.translate(html, function (translated) {
              $('.topics-panel').html(translated);
            });
          });
        });
      });
    });
    

Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.