在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 渲染方法将数据转换为字符串（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() 方法，而不是渲染方法 (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

在jsrender中给元素设置数据

Set data to elements in jsrender

jquery-templates

jsrender

jsviews