Handlebars dynamic field names

Question

I'm working with Handlebars in a Meteor app and want to do the following:

I have a database with data about recurring payments. Here's my markup for displaying the next payment details:

{{#each Customers}}
    <tr>
        <td id="{{nextpayment}}">{{nextpayment}}</td>
        <td>{{name}}</td>
        <td>{{subscription_amount}}</td>
        <td><input type="checkbox" class="payment-received" data-id="{{_id}}"></td>
    </tr>
{{/each}}

This would generate the following for example:

<tr>
    <td id="3-11-2013">3-11-2013</td>
    <td>John Smith</td>
    <td>$55</td>
    <td><input type="checkbox" class="payment-received" data-id="yZxkFPgeCzpBK6LKJ"></td>
</tr>

I want to be able to track whether the payment has been received via the check box.. I have achieved this by creating a database entry with the field name being the corresponding date and a simple boolean value. (e.g. 3-11-2013 : false ). So I need to be able to insert the value for the field name that corresponds to the current nextpayment value.

For example, in this case I would want to get the database entry for 3-11-2013 and insert the value of true/false (or whatever) so I can work with it.

My question is: is there any way to work this into a handlebars template?

Answer 1

If the checkbox is for the user to check at, then you may have another field called check_payment which can be used as follows:

<input type="checkbox" name="check_payment" class="payment-received" data-id="{{_id}}" checked="
{{#if author}}    
  checked
{{/if}}
">

Another approach:

Since I don't know the full data structure or platforms of your application, I am going to make a few assumptions and thus pseudo-codes.

The core point is that at what time a record is inserted in the database corresponding to a customer and a date. As soon as the customer pays, then the customer or the application will itself will tick the checkbox (true value) or else the default value is false.

1) Server-side operation:

Handlebars.registerHelper('check_present', function(obj,list, options) {
    for(var i=0,j=list.length; i<j; i++) {
        if(obj==list[i])return true;
    }
    return false;
});


{{#each Customers}}
    <tr>
        <td id="{{nextpayment}}">{{nextpayment}}</td>
        <td>{{name}}</td>
        <td>{{subscription_amount}}</td>


        <td>
            <input type="checkbox" class="payment-received" data-id="{{_id}}" 

            {{if check_present(_id,customer_list) }}  //User-defined Handlebar function
                checked="checked"
            {{/if}}></td>
    </tr>
{{/each}}

2) Client-side operation: Use JS library for utilities functions like Underscore.js, Prototype.js, Backbone.js etc.

Using underscore.js and jQuery,

$('.payment_received').each(function(){
    if(_.contains(customer_list, $(this).attr('data-id'))){
        $(this).attr("checked","checked");
    }else{
        $(this).removeAttr("checked");
    }
})

3) Database-level operation: Perform operations at database level for fetching who has paid and who has not paid and the complete list of customers. Then do intersection operation among themselves. You can now use handlebars straightforwardly.