Setze Daten zu Elementen in jsrender

Question

Ich versuche, die Daten zu den Elementen in jsrender zu setzen.

ZB: {{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 ""; 
      }, 
}); 

Gibt es eine Möglichkeit, die Daten leicht anstatt direkt in HTML zu setzen.

Answer 1

Ihr Beispiel würde nicht funktionieren, weil JsRender Methode von Daten in einen String (HTML-Markup) macht umwandelt, die Sie dann Einsatz in das DOM (http://www.jsviews.com/#rendertmpl). Wenn der Konverter aufgerufen wird, wurde das Element, auf das Sie hinzielen, noch nicht instanziiert.

Um Daten zu setzen, müssen Sie das HTML-Markup data-xxx="..." verwenden, damit es auf das Element gesetzt wird, wenn Sie es in das DOM einfügen.

Hier sind einige Varianten. Sie können schreiben:

<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> 

mit

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

und

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

Passing und Objekt zu einem HTML-Element erhalten: Verwendung JsViews:

Wenn Sie übergeben möchten in einem Objekt als Daten, nicht als String (Ihre obigen Beispiele sind Strings, also Ihre Frage ist dazu nicht klar), dann müssen Sie jsviews.js, nicht jsrender.js und die Methode link() anstelle der Rendermethode (http://www.jsviews.com/#jsv-quickstart) verwenden. Jetzt haben Sie Zugriff auf die Elemente, so dass Sie diese Varianten zu tun:

<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); 
    } 
}); 

und

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