Установить данные в элементы в 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 

Passing и объект в 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