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

我使用rivets-include来实现它

在rivets.js中动态添加组件不起作用

1 个答案: