model values is not binded to injected html

[nikopolidi]

Hello! I was looking for solution to inject html markup with variables from ajax response.
And I have found joicy-html.

here is my code:

<dom-module id="mc-menu-item">
  <template >
    <template 
      is="juicy-html"
      content$="{{markup.item}}"
      model="{{menuitem}}"
    ></template>
  </template>
  <script>
    Polymer({
      is: "mc-menu-item"
      ,properties:{
        "menuitem":{
          type: Object
        }
        ,"markup":{
          type: Object
        }
      }
      ,ready: function (){
      }

    });
  </script>
</dom-module>

Where:

markup = {item: "<p>item type: <span>{{model.type}}</span></p>"}
menuitem = {type: 'item'}

As a result I'm getting rendered markup.item inserted html as is (without data binded)

I was thinking of putting markup.item between dom-bind template like this:

<template is="dom-bind"><p>item type: <span>{{model.type}}</span></p></template>

But nothing rendered after this change. Please let me know what am I doing wrong?

[tomalec]

juicy-html is vanillaJS custom element, so it does not assume any template binding framework. That's why your first attempt does not work.

However,

markup = {item: '<template is="dom-bind"><p>item type: <span>{{model.type}}</span></p></template>'}
menuitem = {type: 'item'}

should work.

We have a working example of Polymer binding integration at http://juicy.github.io/juicy-html/examples/inline_markup_w_model_binding.html.

@nikopolidi Could you prepare a jsfiddle/jsbin with your use-case?

[tomalec]

@nikopolidi I'm closing this as answered, but feel free to re-open it if you have any other comments or questions.