RactiveJS-Iterator mit On-Click-Verhalten

Question

Ich versuche, eine Funktion auszulösen, die Teil des Datenobjekts ist, das ich beim Füllen einer Vorlage an RactiveJS übergebe.Ich habe einige andere Bibliotheken ausprobiert, kann aber nicht finden, wonach ich suche.Hier ist die Beschreibung dessen, was ich tue, und ich hoffe, dass jemand eine Bibliothek für das tun kann, was ich versuche.

Ein Dienst füttert meine Anwendung mit einem JSON-Objekt, das in etwa so aussieht

var data = {
    "users": {
        "Aaron": {
            "age": "31",
            "level": "legit",
            "talk": function(){
                console.log("Howdy! I'm " + this.level);
            }
        },
        "Pete": {
            "age": "30",
            "level": "godlike",
            "talk": function(){
                console.log("Howdy! I'm " + this.level);
            }
        }
    }
};

Meine Vorlage scheint gemäß den Anweisungen korrekt zu sein Dokumentation

var usersTemplate = "<ul>{{#users:name}}<li><a href='#' on-click='talk'>{{name}} says:</li>{{/users}}</ul>";

Dann baue ich eine neue Ractive-Instanz

var people = new Ractive({
    el: "#userlist",
    template: usersTemplate ,
    data: data
});

Das Problem ist, dass das Klicken auf jeden Benutzer eigentlich nichts bewirkt, weil RactiveJS so nicht zu funktionieren scheint.Es behandelt Ereignisse wie Das.

people.on({
    talk: function(evt){
        evt.original.preventDefault();
        console.log("I clicked on the template");
    }
});

Ich versuche, das auszulösen action Funktion innerhalb des Datenobjekts, das ich übergeben habe, ohne dass der Controller den Namen der Methode kennt.Es sollte ausreichen, es in der Vorlage und im Datenobjekt anzugeben.

Ractive liefert genügend Informationen, damit ich das Datenobjekt durchlaufen kann, aber das ist nicht gut genug.

people.on({
    talk: function( evt ) {
        evt.original.preventDefault();
        var pointer = json_output;
        var path = evt.keypath.split(".");
        for( var i = 0; i < path.length; i++){
            console.log(i);
            pointer = pointer[path[i]];
        }
        if(pointer.hasOwnProperty("action") && typeof(pointer.action) === "function") {
            pointer.action(evt);
        }
    }
});

JSBin-Beispiel

Ist RactiveJS nicht die richtige Bibliothek für den Job?Vielen Dank im Voraus, dass Sie mir bei meiner Suche geholfen haben.

Answer 1

Während RActive Sie nicht erlaubt, dass Sie Funktionen direkt anrufen können, unterstützt es Ereignisargumente, daher gibt es eine sehr schöne Problemumgehung:

generasacodicetagpre. generasacodicetagpre.

Answer 2

Sie können Ihren Code folgendermaßen vereinfachen:

 people.on({
     talk: function( evt ) {
         evt.original.preventDefault();
         evt.context.talk(evt)
     }
 });

Darüber hinaus können Sie über mehr nachdenken meta So geht das:

 function getProxyHandler(eventName) {
    return function(event) {
       event.context[eventName](event)
    }
 }

Auf diese Weise könnten Ihre Ereignisse wie folgt zugewiesen werden:

 people.on({ 
     talk:getProxyHandler('talk'), 
     eat: getProxyHandler('eat') 
 })

Mit benutzerdefinierten Ereignissen, wie @Martin gezeigt hat, können Sie den Handler so ändern, dass er eine Funktion innerhalb eines Ereignisses anwendet oder aufruft, wie folgt:

 people.on('call' , function(event, method) {
      method.call(event.context)
 })  

Answer 3

Gibt es eine Möglichkeit, die Erstellung des Objekts zu automatisieren, das Sie an den generationspflichtigen Griztreticetagcode angeben, wenn der Wert der in Klick-Attribute der TEMPLATE verwendet wird?RAVIVE entfernt diese auf Click-Attribute

Andere, so könnte so etwas wie diese zusammen mit Jquery gehackt werden

generasacodicetagpre.