Event handling: Use binding model as context

[Arjeno]

This is more of a question than it is a pull request. I've just started playing with rivets, it's working pretty great. There is one thing that 'feels' a bit odd, it's the context of a function that is called within events. Let me explain:

Current situation

<a rv-on-click="toggle">Toggle me</a>
<div rv-show="open">Information</div>

class SomeInterface
  toggle: (event, context) ->
    @open = !@open # This doesn't work because we're not in the right context
    context.model.open = !context.model.open

Situation in this pull request

Given the same HTML as above.

class SomeInterface
  toggle: (event, context) ->
    @open = !@open

---

Is this on purpose, am I missing something? Or am I simply doing something wrong? Would love to get some feedback.

[Duder-onomy]

@Arjeno Your handler is configurable. You can .call the bound method with whatever you want.

From Rivets website:

rivets.configure(
  // Augment the event handler of the on-* binder
  handler: function(target, event, binding) {
    this.call(target, event, binding.view.models)
  }
})

In our SPA's we prefer to call the method with the context of the closure as the original object. So the word this inside of the closure would be reference to the parent closure. In your example the word this and I assume the symbol @ would be === SomeInterface

Here is how that is done:

rivets.configure({
    handler : function(target, event, binding) {
        this.call(binding.observer.target, event, binding.view.models);
    }
});

here is a working fiddle similar to what your example demonstrates:
http://jsfiddle.net/c022hme3/4/

[Arjeno]

@Duder-onomy Thanks a lot, crystal clear answer. I'll configure that in my project as it's my preference.

[Arjeno]

@Duder-onomy Any idea how I could get the same instantiated SomeInterface from within an iterator? It looks like it copies the data for each iterator. I'm doing something like this:

class SomeInterface
  articles: [...]
  constructor: ->
    rivets.bind($('#element'), @)

  select: (event, object) ->
    console.log @ # This is a different object each iteration
    @currentArticle = object.article

interface = new SomeInterface()

%div{ 'rv-each-article' => 'articles', 'rv-class-active' => 'article.id | eq currentArticle.id' }
  %a{ 'rv-on-click' => 'select' } { article.title }

[Duder-onomy]

Yeah, I dont totally understand why this is happening. But here is a A/B with one line change to make it work / not work:

Here it is not working, as close as I could get to your example:
http://jsfiddle.net/bd9ucLo6/11/

Notice this line number 12:

this.rivetsView = rivets.bind(document.getElementById('yeahBuddy'), this);

Here is a working example,
http://jsfiddle.net/bd9ucLo6/12/

Notice this line number 12:

this.rivetsView = rivets.bind(document.getElementById('yeahBuddy'), { interface : this });

*also had to change the HTML to access from the interface.

Yeah, I dont really know why....but that is the fix.

So what you would change is the line:

rivets.bind($('#element'), @)

[Arjeno]

@Duder-onomy Thanks for investigating and setting up those fiddles. Looks like rivets simply copies the key/values from the original data. So the way I work with rivets (using instances) won't work. There's a pull request / discussion for this: #417

[Arjeno]

Might as well close this one for now. Thanks for your help @Duder-onomy