我尝试将数据设置为 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中。
【问题讨论】：
标签： jquery-templates jsrender jsviews
您的示例不起作用，因为 JsRender 渲染方法将数据转换为字符串（HTML 标记），您然后将其插入 DOM (http://www.jsviews.com/#rendertmpl)。因此，当调用转换器时，您所定位的元素尚未被实例化。
因此，要设置数据，您必须使用 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() 方法，而不是 render 方法 (http://www.jsviews.com/#jsv-quickstart)。现在您可以访问这些元素，因此您也可以执行这些变体：
<div id="e" data-link="data-key{:~myOb}"></div>
<div id="f" data-link="{setdata 'myKey' ~myOb}"></div>
使用
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
【讨论】：