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

? Offline

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

? Offline

@exodo well. Where is your topic.tpl file located at?
For example, if it is inside of a folder, you can use  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  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

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

alt text

psychobunny

@yariplus said:

There may be a way to explicitly declare the namespace too that I'm not aware of, something like

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