2017-09-03 60 views
0

我從服務器獲取與循環中的數據值 數據,然後我會在HTML DOM根據數據在不工作

加上鉚釘模板rivets.js動態添加組件,這是我的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標籤,但模板沒有添加爲什麼?

這是鉻調試

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

回答