在rivets.js中動態添加組件不起作用

Question

我從服務器獲取數據並循環數據值，然后根據數據在HTML DOM中添加鉚釘模板

這是我的HTML代碼

 <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> 

這是我的JavaScript代碼

 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 }) 

當我在chrome中運行它時，我發現創建了htitle標簽，但未添加模板，為什么？

這是chrome調試器中的代碼

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

它應該是

 <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

我使用鉚釘包括實現它