javascript - 具有点击行为的 RactiveJS 迭代器

Question

我试图触发一个函数，该函数是我在填充模板时传递给 RactiveJS 的数据对象的一部分。我试过其他几个图书馆，但找不到我要找的东西。这是我正在做的事情的描述，我希望有人可以建议一个图书馆来做我想做的事情。

一项服务正在向我的应用程序提供一个类似于下图的 JSON 对象

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

我的模板似乎是正确的按照 Documentation 的指示

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

然后我构建一个新的 Ractive 实例

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

问题是，点击每个用户实际上不会做任何事情，因为 RactiveJS 似乎不是那样工作的。它处理类似 this 的事件.

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

我想做的是在我传入的数据对象中触发 action 函数，而 Controller 不知道该方法的名称是什么。在模板和数据对象中指定它就足够了。

Ractive 提供了足够的信息让我可以遍历数据对象，但这还不够好。

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 Example

RactiveJS 不是适合这项工作的库吗？提前感谢您帮助我进行搜索。

Answer 1

虽然 Ractive 不允许您直接调用函数，但它支持事件参数，因此有一个非常好的解决方法:

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