Polymer, template won't evaluate true and bind

Question

Using polymer I am very simply trying to evaluate wether an object property is a specific value, and if so bind the contents of truthy template to the dom.

I have:

<polymer-element name="template-elem">
  <template >
    <div>
    <template if={{response.data.type === "message"}}>
      <div>working</div>
    </template>
    </div>
  </template>
  <script>

    Polymer({
      response: {}, 
        ready: function(){
      this.response = {"data":{
        "type":"message",
        "detail":"default"
      }};
        },
    });
  </script>
</polymer-element>

Also tried, == "message". The template DOES bind if asked to evaluate a boolean expression, and {{response.data.detail}} displays the correct text. I have tried this in two separate elements (starting from scratch) and the problem persists, can anyone tell me what I am clearly overlooking?

Also tried passing to a helper function {{response | parseObj}}, {{item in response | parseObj}}, {{item in response.data | parseObj}} {{response | parseObj}}, {{item in response | parseObj}}, {{item in response.data | parseObj}} {{response | parseObj}}, {{item in response | parseObj}}, {{item in response.data | parseObj}} and the function is never called.

Answer 1

You forgot the quotation marks around the if attribute value. Try

<template if="{{response.data.type === 'message'}}">

Without the quotes, the browser (Chrome) parses this line as

<template if="{{response.data.type" =="=" 'message'}}=""></template>