RactiveJS iterador con en-haga clic en el comportamiento

Question

Estoy tratando de fuego de una función que es parte del objeto de datos, estoy pasando a RactiveJS al rellenar una plantilla.Yo he probado un par de otras bibliotecas, pero no puedo encontrar lo que estoy buscando.Aquí está la descripción de lo que estoy haciendo, y tengo la esperanza de que alguien puede sugerir una biblioteca para hacer lo que estoy tratando de hacer.

Un servicio de alimentación de mi aplicación un Objeto JSON que se ve algo como esto

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

Mi plantilla parece ser la correcta Según las instrucciones del Documentación

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

A continuación, voy a construir una nueva instancia Ractive

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

El problema es que, al hacer clic en cada usuario en realidad no va a hacer nada, porque RactiveJS parece que no funciona así.Se encarga de eventos como este.

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

Lo que estoy tratando de hacer es activar la action función dentro del objeto de datos que he pasado sin el controlador de saber cuál es el nombre del método.Se especifica en la plantilla, y en el objeto de datos debería ser suficiente.

Ractive da la suficiente información que me puedan atravesar el objeto de datos, pero esto no es suficiente.

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 Ejemplo

Es RactiveJS no el derecho de la biblioteca para el trabajo?Gracias de antemano por ayudarme en mi búsqueda.

Answer 1

Mientras que Ractive no le permite llamar a funciones directamente, es compatible con los argumentos de eventos, por lo que hay una solución muy agradable para esto:

<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

Usted puede simplificar su código como este:

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

por otra parte, se puede pensar en más meta forma de hacerlo:

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

de esta manera los eventos pueden ser asignados como:

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

El uso personalizado de los eventos de la @Martin mostró usted puede cambiar el controlador de aplicar o llame a la función dentro del evento como este:

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

Answer 3

¿Hay alguna manera de automatizar la creación del objeto que pasa a people.on() dado el valor de los atributos en el clic de la plantilla?Ractive elimina estos atributos en el clic

awaywise, algo como esto podría ser pirateado junto con 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);
  }
});