带有自定义参数的 Rivets.js 事件处理程序答案

【问题标题】：Rivets.js event handlers with custom arguments带有自定义参数的 Rivets.js 事件处理程序
【发布时间】：2020-07-27 18:17:22
【问题描述】：

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

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

My code:

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

此代码有效，我的问题是：这是正确的方法吗？

【问题讨论】：

这是一个有效的参数（原文如此） - 应该有一种方法可以将 args 传递给事件处理程序，但并不明显。

标签： javascript rivets.js

【解决方案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>

然后您可以像这样在事件处理程序中访问当前的“组”对象：

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

更多关于这项技术的细节可以在这里找到https://github.com/mikeric/rivets/pull/162

我希望这会有所帮助。

【讨论】：

【解决方案2】：

这里还有一个答案： https://github.com/mikeric/rivets/issues/682 由那美克：

您可以定义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'"

【讨论】：