Обработчики событий Rivets.js с настраиваемыми аргументами

Я только начал с 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) {    
  }
}

Этот код работает, мой вопрос: правильно ли это?

Ответы

Ответ 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 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>

Это не мой код (я нашел его здесь), но он работает с 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>

Затем вы можете получить доступ к текущему объекту "group" в обработчике событий следующим образом:

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

Подробнее об этом методе он может найти здесь https://github.com/mikeric/rivets/pull/162

Надеюсь, это поможет.