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

.

我的模板似乎是正确的文档

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

.

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

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

.

问题是，单击每个用户实际上不会做任何事情，因为ractivejs似乎没有这样的工作。它处理像

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

.

我正在尝试的是触发我在没有控制器的数据对象内部的action函数，知道该方法的名称是什么。在模板中指定它，在数据对象中应该足够。

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示例

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

.

Answer 2

您可以简化这样的代码：

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

. 而且，您可以考虑更多的meta方式：

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

.

这样，您的事件可能会被分配，如：

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

.

使用自定义事件@martin显示您可以更改处理程序以在这样的事件中应用或调用函数：

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

.

Answer 3

是否有一种方法可以自动创建您传递给people.on()的对象给定模板的单击属性的值？Ractive删除了这些单击属性

其他方式，像这样的东西可以与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);
  }
});

.