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（）方法，而不是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

将数据设置为jsrender中的元素

1 个答案: