将数据设置为jsrender中的元素

Question

我尝试将数据设置为jsrender中的元素。

如：{{setdata:id 'hai' 'hello'}}

jQuery.views.converters({ 
      setdata: function(id){ 
       var key = this.tagCtx.args[1]; 
       var value = this.tagCtx.args[2]; 

       jQuery("#" + id).data(key, value); 
       return ""; 
      }, 
}); 

有没有办法在HTML容易，而不是直接设置数据。

Answer 1

你的例子不起作用，因为JsRender渲染方法从数据转换为你插入到DOM（http://www.jsviews.com/#rendertmpl）的字符串（HTML标记），然后然后。所以当转换器被调用时，你的目标元素还没有被实例化。

因此，要设置数据，您必须使用HTML标记data-xxx="..."，以便在将元素插入DOM时将元素设置在元素上。

以下是一些变体。你可以写：

<div id="a" data-foo="bar"></div> 
<div id="b" data-{{:key}}="{{:value}}"></div> 
<div id="c" {{setdata:'hai' 'hello'}}></div> 
<div id="d" {{setdata:key value}}></div> 

与

jQuery.views.converters({ 
    setdata: function(key, value){ 
    return "data-" + key + "='" + value + "'"; 
    } 
}); 

，并得到

console.log($("#a").data('foo') 
    + " " + $("#b").data('hai') 
    + " " + $("#c").data('hai') 
    + " " + $("#d").data('hai')); // bar hello hello hello 

传递和对象到HTML元素：使用JsViews：

如果你想传递在一个对象中作为数据，而不是一个字符串（上面的例子是字符串，所以你的问题不清楚），那么你需要使用jsviews.js，而不是jsrender.js和link（）方法，而不是渲染方法（http://www.jsviews.com/#jsv-quickstart）。现在，您可以访问的元素，所以你可以做这些变种太：

<div id="e" data-link="data-key{:~myOb}"></div> 
<div id="f" data-link="{setdata 'myKey' ~myOb}"></div> 

使用类似数据 - [变量] HTML =值使用

jQuery.views.tags({ 
    setdata: function(key, value) { 
    $(this.linkCtx.elem).data(key, value); 
    } 
}); 

和

tmpl.link("#result", myData, {myOb: {foo: "fooValue"}}); 
console.log($("#e").data('myKey').foo 
    + " " + $("#f").data('myKey').foo); //fooValue fooValue