Importing tpl inside another tpl

[exodo]

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?

[A Former User]

Did you tried ../TEMPLATENAME.tpl?

[exodo]

@AOKP said:

Did you tried ../TEMPLATENAME.tpl?

what do you mean

[frissdiegurke]

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

[yariplus]

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');
      });
    });
  });
});

[A Former User]

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

[exodo]

@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

@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

[yariplus]

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.

[exodo]

@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

[psychobunny]

@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

[yariplus]

@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);
        });
      });
    });
  });
});