RactiveJS Iterator con comportamento click

Question

Sto tentando di sparare una funzione che fa parte dell'oggetto dati che sto passando a ractivejs durante la popolazione di un modello. Ho provato alcune altre biblioteche, ma non riesco a trovare quello che sto cercando. Ecco la descrizione di ciò che sto facendo, e spero che qualcuno possa suggerire una biblioteca per fare ciò che sto cercando di fare.

Un servizio sta alimentando la mia applicazione un oggetto JSON che sembra qualcosa di simile a questo

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

.

Il mio modello sembra essere corretto come indicato da Documentazione Quindi costruisco una nuova istanza rattiva

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

.

Il problema è che cliccando su ciascun utente non farà effettivamente nulla perché RactiveJS non sembra funzionare così. Gestisce eventi come .

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

.

Che cosa sto cercando di fare è innescare la funzione action all'interno dell'oggetto dati che ho trasmesso senza il controller sapendo cosa è il nome del metodo. Specificandolo nel modello e nell'oggetto dati dovrebbe essere sufficiente.

raction fornisce informazioni sufficienti che posso attraversare l'oggetto dati, ma questo non è abbastanza buono.

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 Esempio

è ractivejs non la biblioteca giusta per il lavoro? Grazie in anticipo per aiutarmi nella mia ricerca.

Answer 1

Mentre Ractive non consente di chiamare direttamente le funzioni, supporta argomenti di eventi, quindi c'è una soluzione molto bella per questo:

<a on-click="call:talk">Talk</a>

.

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

ractive.on('call', function ( event, method ) {
    event.context[method]();
});

.

Answer 2

Puoi semplificare il tuo codice come questo:

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

.

Inoltre, puoi pensare al modo più generatori di meta per farlo:

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

.

In questo modo i tuoi eventi potrebbero essere assegnati come:

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

.

Utilizzo di eventi personalizzati L'@martin ha mostrato che è possibile modificare il gestore per applicare o chiamare la funzione all'interno dell'evento come questa:

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

.

Answer 3

C'è un modo per automatizzare la creazione dell'oggetto che passa a people.on() dato il valore degli attributi accesa del modello del modello?Ractive rimuove questi attributi on-clic

ANCHINE, qualcosa del genere potrebbe essere violato insieme a JQuery

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

        $("[on-click]", "#userlist").each(function(e){

            action = $(this).attr('on-click');
            onHanlder[action] = getProxyHandler(action);

       });

    this.on(onHandler);
  }
});

.