我希望能够通过单击超链接来加载/编辑 handlebars.js 模板（快速服务器），有什么建议吗？

Question

One of the most time-consuming portions of development on a handlebars.js app is finding the location of the template/partial that is being used for that specific piece of HTML. Is there is a way to create a hyperlink on a localhost server to be able to click and open the template without having to manually search for text etc?

This would also help other users editing the code as it would simplify traceability.

There could be scope for an npm module or similar to do this, just not sure the exact approach.

Likely due to the sublime / browser interface, it should perhaps be a chrome extension. The other option would be to have an admin user-level interface, that allowed code editing from a modal.

Please let me know if you have a solution for this, or if there is some kind of glaringly obvious simple approach that I am missing?

Answer 1

So I have managed to implement a workaround for this using Grunt.

Basically, it adds a button in the HTML page that can be clicked in the browser that opens that handlebars template in sublime for editing. Local

Express

exports.editfile = function(req, res,next) {
var filename = req.query['filename']
const { exec, spawn } = require('child_process');
exec('grunt editfile --filename='+filename, (err, stdout, stderr) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(stdout);
});
res.send('complete');
};

Grunt

//In the grunt init
  shell: {  
    'openfile':openFile(),
    }
    grunt.loadNpmTasks('grunt-shell');
function openFile(){
    var openString = ''
    var fileName = grunt.option('filename'); //get value of target, my_module
    openString = {
        command: [
        'cd..','cd..','cd..','cd '+process.env.ROOTFOLDER,
        'sublime_text.exe "'+fileName+'"',
        ].join('&&')
    }
    return openString
}

grunt.registerTask('editfile',[
    'shell:openfile'
    ]);

Handlebars

<a class="btn btn-outline-warning bt-sm adminedit" style="" data-filename="{{filename}}" id="{{uniqueid}}" onclick="editFile(this.id)" href="#" class="text-warning">edit</a>
<script type="text/javascript">
function editFile(iditem){
  var editFilename = $('#'+iditem).attr("data-filename")
  $.ajax({
    url     : '/semini/admin/editfile/?filename='+editFilename,
    success : function( data ) {
      console.log('executing  : ',data)
    },
    error   : function( xhr, err ) {
      alert('Error',err);     
    }
  });   
}
</script>

Note, to get sublime to open from the CMD, you have to add an environment variable in windows. Not too difficult, just google.

It works great ..... but I cannot get a partial on handlebars to provide its name, and as such this only works for the first rendered page and not partials.