Add components dynamically in rivets.js not working

Question

I get the data from server and loop the data value then I will add the rivets template in HTML DOM according to the data

this is my HTML code

<div rv-each-mod='not.module'>
    <div rv-templatemod="mod"></div>
</div> 
<template id="h_title">
  <div class="notice-tp notice-i">
    <p class="notice-tp-t first_font_size second_color">{modinfo}</p>
  </div>
</template>

this is my javascript code

function templateViewModel(attributes) {
   this.modinfo= attributes.modAttr;
   console.log(this.modinfo)
}
rivets.binders.templatemod = function(el, mod) {
   var element=document.createElement(mod.type);   //example mod.type = htitle
   element.setAttribute("mod-attr",JSON.stringify(mod))
   el.parentNode && el.parentNode.appendChild(element)
}
rivets.components["htitle"] = {
    template : function (){
       return $api.html($api.dom("#h_title"));
    },
    initialize: function(el, attributes) {
        return new templateViewModel(attributes);
    }
}
rivets.bind($api.dom("#rivets-bind"),{
    not:notice
})

When I run it in chrome I found that htitle tag is created but template is not add why?

this is code in chrome debugger

<h_title mod-attr="{&quot;type&quot;:&quot;htitle&quot;,&quot;content&quot;:&quot;xxxxxx&quot;}"></h_title>

it should be

<h_title mod-attr="{&quot;type&quot;:&quot;htitle&quot;,&quot;content&quot;:&quot;xxxxxx&quot;}">
    <div class="notice-tp notice-i">
        <p class="notice-tp-t first_font_size second_color">{modinfo}</p>
    </div>
</h_title>

Answer 1

I use rivets-include to achieve it