Search code examples
javascriptmeteorspacebars

Spacebars - insert params in pure javascript without handlebars style braces

I have a spacebars template for creating a button that invokes a modal: 

{{#bootstrapModal
    triggerLabel="Delete"
    triggerIcon="fa-trash-o"
    triggerClass="btn-danger"
    id="deleteModal"
    title="Delete Item"
    closeLabel="No"
    primaryLabel="Delete it!"
    infoId="item123"
    infoName="Document 123"
}}
Are you sure you want to delete?
{{/bootstrapModal}}

The bootstrapModal template:

<template name="bootstrapModal">
<button class="btn {{triggerClass}}" data-toggle="modal" data-target="#{{id}}">
    {{#if triggerIcon}}
        <i class="fa {{triggerIcon}}"> {{triggerLabel}}</i>
    {{/if}}

</button>
<div class="modal fade" id="{{id}}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{title}} {{infoName}}</h4>
            </div>
            <div class="modal-body">
                {{> UI.contentBlock}}
                <b>{{infoName}}</b>
            </div>
            <div class="modal-footer">
                {{#if closeLabel}}
                <button type="button" class="btn btn-default" data-dismiss="modal">{{closeLabel}}</button>
                {{/if}}
                <button type="button" class="btn btn-primary">{{primaryLabel}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Which creates a button, assigns a modal to it and then I use a helper to assign functionality to the modal.

I am using the excellent reactive tables package and the fn capability https://github.com/ecohealthalliance/reactive-table#virtual-columns. I would like to use an object as params to insert into a table cell as from what I gather you can't use handlebars / spacebars {{ }} syntax within the function. Can anyone point me in the right direction? I have some code below...

{ key: 'hello', label: "Tools", fn: function(value, object) {
                var context = {
                    triggerLabel: "Delete",
                    triggerIcon: "fa-trash-o",
                    triggerClass: "btn-danger",
                    id: "deleteModal",
                    title: "Delete Item",
                    closeLabel: "No",
                    primaryLabel: "Delete it!",
                    infoId: object._id,
                    infoName: object.name
                }

                // how to insert the context object into the bootstrapModal spacebars template in raw JS?

}

Am relatively new with Meteor, any clues?

Solution

  • You can use the #with helper to change the current context in Handlebars:

    {{#with context}}
  {{#bootstrapModal}}
    ...
  {{/bootstrapModal}}
{{/with}}