template.js to benchpress issue.

[tmikaeld]

I have an older plugin I'm trying to update after another developer, however, I'm confused by the change of engine.

The template.js front-end code is:

      var html = templates.parse(template, {
        item       : item,
        isEdit     : true,
        categories : categories,
        SETTINGS   : ajaxify.data.SETTINGS,
      });

I must be missing something, I really cannot see why it doesn't work with benchpress.

[PitaJ]

What is the value of template? You can't get the rendered HTML directly like that, you have to pass a callback as the last parameter.

What you should be doing is using

require(['benchpress'], function (benchpress) {
  benchpress.parse(template, data, function (html) {
    // do whatever
  });
});

[tmikaeld]

template.js was only used in two places and I still have a hard time figuring out how he's using template.js

  function handlerClickCard_btnEdit(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    var uid = $(this).attr('data-item-uid');

    if (!uid) return undefined;

    var item = ajaxify.data.list.find(function(itm) {
      return itm && itm.uid === uid
    });

    ajaxify.loadTemplate(self.config().templates.modalEditAlbum, function(template) {
      var categories = ajaxify.data.categories;

      // set selected option in selectbox
      if (item.category && item.category.cid) {
        categories.forEach(function(itm) {
          if (itm && itm.cid === item.category.cid) itm.selected = true;
        });
      }

      var html = templates.parse(template, {
        item       : item,
        isEdit     : true,
        categories : categories,
        SETTINGS   : ajaxify.data.SETTINGS,
      });

      bootbox.dialog({
        title   : '[[gallery:placeholder.edit]]' + ' "' + item.name + '"',
        message : html,
      });
    });
  }

  function handlerClick_btnNewGallery() {
    ajaxify.loadTemplate(self.config().templates.modalEditAlbum, function(template) {
      var categories = ajaxify.data.categories;

      console.log(template);
      var html = templates.parse(template, {
        item: {
          isPublic: false,
        },
        isNew      : true,
        categories : categories,
        SETTINGS   : ajaxify.data.SETTINGS,
      });

      bootbox.dialog({
        title   : '[[gallery:modal.title.new_gallery]]',
        message : html,
      });
    });
  }

[PitaJ]

@tmikaeld ok so instead of

ajaxify.loadTemplate(templateName, function (template) {
  // before stuff
  var html = templates.parse(template, data);
  // after stuff
});

You should just do

// before stuff
benchpress.parse(templateName, data, function (html) {
  // after stuff
});

[PitaJ]

What he's doing is super weird, he's loading in the template manually and then parsing it with templatesjs. That kind of flow is no longer supported, so you have to use the (arguably easier) form I suggested.

[tmikaeld]

@PitaJ Thanks, I'll test it first thing tomorrow

[tmikaeld]

@PitaJ

Is benchpress not loaded globally?

I get "benchpress is not defined", so i guess i need to require it, but do i have to do this in a wrapping function or can i use:

var benchpress = require(['benchpress']);

UPDATE:

When i tried with var benchpress = require(['benchpress']); I get benchpress.parse is not a function

[tmikaeld]

This is how i rewrote the functions by the way.

var benchpress = require(['benchpress']);

  function handlerClickCard_btnEdit(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    var uid = $(this).attr('data-item-uid');

    if (!uid) return undefined;

    var item = ajaxify.data.list.find(function(itm) {
      return itm && itm.uid === uid
    });

      var categories = ajaxify.data.categories;

      // set selected option in selectbox
      if (item.category && item.category.cid) {
        categories.forEach(function(itm) {
          if (itm && itm.cid === item.category.cid) itm.selected = true;
        });
      }

      benchpress.parse(self.config().templates.modalEditAlbum, {
        item       : item,
        isEdit     : true,
        categories : categories,
        SETTINGS   : ajaxify.data.SETTINGS,
      }, function (html) {
        bootbox.dialog({
          title   : '[[gallery:placeholder.edit]]' + ' "' + item.name + '"',
          message : html,
        });
      });

  }



  function handlerClick_btnNewGallery() {
		
    var categories = ajaxify.data.categories;

		benchpress.parse(self.config().templates.modalEditAlbum, {
      item: {
        isPublic: false,
      },
      isNew      : true,
      categories : categories,
      SETTINGS   : ajaxify.data.SETTINGS,
      }, function (html) {
          bootbox.dialog({
            title   : '[[gallery:placeholder.edit]]' + ' "' + item.name + '"',
            message : html,
          });
        });

  }

It this what you had in mind @PitaJ ?

[yariplus]

require uses a callback.

require(['benchpress'], function (benchpress) {
  // code that uses benchpress
});

[tmikaeld]

@yariplus Work! Thanks