RactiveJS iterador com comportamento de clique

Question

Eu estou tentando ao fogo uma função que faz parte do objeto de dados estou passando para RactiveJS quando preencher um modelo.Eu tentei algumas outras bibliotecas, mas eu não posso encontrar o que eu estou procurando.Aqui está a descrição do que eu estou fazendo, e estou esperançoso de que alguém pode sugerir uma biblioteca para fazer o que eu estou tentando fazer.

Um serviço é alimentar o meu aplicação de um Objeto JSON que é algo como isto

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

O meu modelo parece estar correta, Conforme as instruções do Documentação

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

Então eu criar uma nova instância Ractive

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

Problema é que, clicando em cada usuário não fazer nada porque RactiveJS não parece funcionar assim.Ele lida com eventos como este.

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

O que eu estou tentando fazer é acionar o action função dentro do objeto de dados que me passaram, sem que o controlador de saber qual e o nome do método.A especificação no modelo, e o objeto de dados deve ser o suficiente.

Ractive dá informações suficientes para que eu possa atravessar o objeto de dados, mas isso não é bom o 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 Exemplo

É RactiveJS não o direito de biblioteca para o trabalho?Obrigado à frente do tempo para me ajudar na minha pesquisa.

Answer 1

Enquanto Ractive não permite que você chamar funções diretamente, ele suporta argumentos do evento, assim há uma muito agradável solução para isso:

<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

Você pode simplificar o seu código como este:

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

além disso, você pode pensar mais meta maneira de fazer isso:

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

desta forma, seus eventos podem ser atribuídos como:

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

Usando eventos personalizados a @Martin mostrou que você pode alterar o manipulador de aplicar, ou chamada de função dentro do evento como esse:

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

Answer 3

Existe uma forma de automatizar a criação do objeto de você passar people.on() dado o valor do modelo do no-clique em atributos?Ractive remove-se em atributos

Otherswise, algo como isto poderia ser cortado em conjunto com 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);
  }
});