Let’s say I have many input fields that a user can fill out, and various math is done and results are shown in real time. E.g.:
[] x [] = (non editable value)
[] + [] = …
Since you can’t do math in Spacebars ({{someVal * anotherVal}}), I’m wondering what the best way to do this, because using helpers will make things messy pretty quickly, I think:
Another way of wording what I want to be able to do:
<input id="chicken-count" type="number"> x unit cost ${{chickenCost}} = ${{chickenTotal}}
Template.orderForm.helpers({
chickenCost: function() {
/* some default value stored in a collection or reactive var */
return ....;
},
chickenTotal: function() {
/* return the chickenCost * $('#chicken-count').val() */
}
});
But imagine there were like 100 different farm animals. I’m trying to think of an optimized way of doing this.
Hmmmm. Ok, that helps quite a bit. But then where do sheepQty and sheepCost come from? I wish I could just directly reference an <input> element’s value and have that be reactive. I guess I can have a change event watch the inputs, and when they change, it collects the value and … does something.
I don’t know where they would come from, perhaps from a document in a collection or another helper. You could have another helper that accepts an id as a param and finds the value if that element of you don’t want to make a helper for hundreds of fields.
Agreed, feed all the logic into the local collection & then use your template to just spit out the values. In generic terms MVC terms, keep as much logic out of the view layer as possible.