JQuery tmpl is not working as expected in my if block

Question

I'm trying to interrogate a string value using JQuery.tmpl() from within an {{if}} block and it's not working for some reason.

I'm using KnockoutJS to render a dashboard with many different types of panels. Each panel has a Type property that will tell me which type of panel it is. So, here is a (very simple) concept of what my data might look like:

var data = {"Panels": [
  {"Type": "A", ... },
  {"Type": "B", ... },
  {"Type": "C", ... },
]};

Here is a template that will render different div tags depending on the Type:

<script id="template" type="text/x-jquery-tmpl">
   {{if Type == "A"}}
     <div>A</div>

   {{else Type == "B"}}
     <div>B</div>

   {{else Type == "C"}}
     <div>C</div>

   {{else}}
     <div>'${Type}' is invalid!</div>

   {{/if}}
</script>

However, I always get output like this:

<div>'A' is invalid!</div>
<div>'B' is invalid!</div>
<div>'C' is invalid!</div>

How can I check a string property (ie. Type) using an {{if ..}} block?

Thanks in advance!

Answer 1

Here is a working copy of your sample in JSFiddle:
http://jsfiddle.net/rniemeyer/cnzeg/

Is there anything different about my sample from what you are trying?

Only other thing that can cause a problem in IE is the trailing comma on your Panels array here:

var data = {"Panels": [
  {"Type": "A", ... },
  {"Type": "B", ... },
  {"Type": "C", ... }*,*
]};

Wouldn't cause the problem that you are seeing though and was likely not in your actual code.