template.js to benchpress issue.



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


  • Global Moderator

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


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

  • Global Moderator

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

  • Global Moderator

    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.



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



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



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


  • Community Rep

    require uses a callback.

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


  • @yariplus Work! Thanks 🐶


Log in to reply
 

Suggested Topics

| |