Question

我刚开始使用Rivets.js，它看起来很有希望成为简单的数据绑定框架。

我已经到了我不知道如何将“自定义参数”传递给rv-on-click活页夹的地步，所以我试图从中提出这个想法：https://github.com/mikeric/rivets/pull/34

rivets.binders["on-click-args"] = {
  bind: function(el) {    
    model = this.model;
    keypath = this.keypath;

    if(model && keypath)
    {
        var args = keypath.split(' ');
        var modelFunction = args.shift();
        args.splice(0, 0, model);

        var fn = model[modelFunction];            
        if(typeof(fn) == "function")
        {
            this.callback = function(e) {
                //copy by value
                var params = args.slice();
                params.splice(0, 0, e);                
                fn.apply(model, params);
            }

            $(el).on('click', this.callback);
        }                        
    }
  },

  unbind: function(el) {
    $(el).off('click', this.callback);
  },

  routine: function(el, value) {    
  }
}

此代码正常运行，我的问题是：这是正确的方法吗？

Answer 1

如果您想将自定义参数传递给事件处理程序，那么此代码可能更简单：

rivets.configure({
    // extracted from: https://github.com/mikeric/rivets/issues/258#issuecomment-52489864
    // This configuration allows for on- handlers to receive arguments
    // so that you can onclick="steps.go" data-on-click="share"
    handler: function (target, event, binding) {
        var eventType = binding.args[0];
        var arg = target.getAttribute('data-on-' + eventType);

        if (arg) {
            this.call(binding.model, arg);
        } else {
            // that's rivets' default behavior afaik
            this.call(binding.model, event, binding);
        }
    }
});

启用此配置后，发送到rv-on-click处理程序的第一个也是唯一的参数是data-on-click指定的值。

<a rv-on-click="steps.go" data-on-click="homePage">home</a>

这不是我的代码（我发现它here），但它确实适用于Rivets 0.8.1。

还有一种方法可以将当前上下文传递给事件处理程序。基本上，当事件触发时，传递给处理程序的第一个参数是事件本身（单击等），第二个参数是模型上下文。

因此，假设您正在处理的模型对象是rv-each循环的产物......

<div rv-each-group="menu.groups">
    <input rv-input="group.name"><button rv-on-click="vm.addItem">Add item</button>
    ___ more code here ___  
</div>

然后你可以访问当前的＆＃34;组＆＃34;事件处理程序中的对象如下：

var viewModel = {
    addItem: function(ev, view) {
        var group = view.group;
    }
};

有关此技术的更多详细信息，请访问此处https://github.com/mikeric/rivets/pull/162

我希望这会有所帮助。

Answer 2

这里还有另一个答案： https://github.com/mikeric/rivets/issues/682 通过Namek：

您可以定义args格式程序：

rivets.formatters.args = function(fn) {
    let args = Array.prototype.slice.call(arguments, 1)
    return () => fn.apply(null, args)
}

然后：

rv-on-click="on_click | args 1"

请注意，args不是一个特殊的ID，您可以定义任何内容代替args。

要传递多个参数，请使用空格："on_click | args 1 2 3 'str'"

使用自定义参数的Rivets.js事件处理程序

2 个答案: