HandleBars.js P TAG LINE NOT APPEAR IN CAT G ENTRY IN LIST

In HandleBars.js I appear a car list (for rentals cars) ,… well like is ALL CARS HAVE AIR CONDITION - But in reality ONE car hasn’t … eg json category G (cat in JSON) HOW SET SO

air conditioning

// LINE NOT APPEAR IN CAT G ENTRY IN LIST?

<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="post" style="padding-bottom:0px;">
<div class="main-block_container">
	<div class="additional-block_container">
		<div class="main-block">									
			<div class="product-img">
				<img src="{{img_small}}" alt="" />
			</div>
			<div class="product-info">
				<h3 class="entry-format">{{cat}}-{{model}} <span> | {{type}}</span> <!--<span class="top-seller">Top Seller</span>--></h3>
				<div class="features">
					<p><img src="images/passenger-icon.png" alt="" /> {{people}} passengers</p>
					<p><img src="images/suitcase-icon.png" alt="" /> {{suitcases}}</p>
					<p><img src="images/transmission-icon.png" alt="" /> {{transm}} transmission</p>
					<p><img src="images/air-icon.png" alt="" /> air conditioning</p>
					<p><img src="images/km_l-icon.png" alt="" /> {{fuel}} {{cc}}cc / {{doors}} doors</p>	
					<p><img src="images/{{available this}}" alt="" /> {{availability}}</p>	
..................
..................
..................
</script>

You’d have to include an air conditioning key in your JSON and set it to true or false. Then you can go

{{ #if airconditioning }}
    <p><img src="images/air-icon.png" alt="" /> air conditioning</p>
{{ /if }}
1 Like

Yes but air conditioning is not in db …

I mist use something like

If cat==‘G’ but how in handlebars.js,…?

Then where is that information coming from?
Where does the other information come from?

The others are in mysql php only a/c param is Not a column in Cars table… but exist way to use it and use cat instead - category

This is indeed not possible I’m afraid… :-/ However you could extend your JSON data before you pass it to the template, like

data.airconditioning = data.cat == 'G';
document.getElementById('carList').innerHTML = carListTemplate(data);
// etc...

Then you have airconditioning available in the template and use a vanilla conditional as above.

Maybe right now this is the only one.
But if you think it might happen that at some point it might be more than only this one I think it would be a good idea to either create a relational table you could do JOIN queries on, or at least do an ALTER TABLE query and add that field to the existing table.

Personal experience has more than once shown me that taking the “easy” way in the short term often ends up being “harder” in the long term.

1 Like

“Harder” as in: hard-coding information into the script? ^^

Yes, that, and that often data gets scattered about and requires more effort in remembering where everything is.

The “exceptions to the rule” always started off being acceptably manageable, but all too often the “unexpected” and unplanned for happens and by the time things get “big” I have a mess on my hands.

I did that for a script once in order to speed up the time it took to create. It took 5 years of my spare time to write the script with everything hard coded and then another 5 years of my spare time to remove all the hard coding (at least I think its all removed now).

2 Likes

so this ^^^ to run - in other words to display the p paragraph tag… what value of airconditioning in {{ #if airconditioning }}…?

how can put an else?

AFAIK handlebars has only simple boolean,comparators and not any more complex logic conditionals.

This leaves
{{#if something_is_true}}
and
{{#unless something_is_true}}

But it does have “else”

{{#if something_is_true}}
<p>hey</p>
{{else}}
<p>oh</p>
{{/if}}

true means have data the var but Neither false nor null
correct?

This is actually possible, although it goes against Handlebars’ logicless templating system. You have to create a custom helper that handles all types of comparison operators. I got the code from this website, but I’ll paste it here:

Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {

    if (arguments.length < 3)
        throw new Error("Handlerbars Helper 'compare' needs 2 parameters");

    var operator = options.hash.operator || "==";

    var operators = {
        '==':       function(l,r) { return l == r; },
        '===':      function(l,r) { return l === r; },
        '!=':       function(l,r) { return l != r; },
        '<':        function(l,r) { return l < r; },
        '>':        function(l,r) { return l > r; },
        '<=':       function(l,r) { return l <= r; },
        '>=':       function(l,r) { return l >= r; },
        'typeof':   function(l,r) { return typeof l == r; }
    }

    if (!operators[operator])
        throw new Error("Handlerbars Helper 'compare' doesn't know the operator "+operator);

    var result = operators[operator](lvalue,rvalue);

    if( result ) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }

});

I haven’t implemented it yet, but it’s in my plans and it seems easy enough.

2 Likes

{{#if aircond}}

air conditioning

{{else}} {{/if}}

aircond column mysql tinyint 1 or 0 but always getting TRUE in handlebars? I have to assign in JS json field > 0=false?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.