Menu
This is so infuriating. It seems like it should be so simple, but I can't find the magic incantation.
Here's the gist of what I need to do:
<div rv-each-thing="data.things">
<input type=button value="Click" onclick="abc( {thing} )">
</div>
That should illustrate what I need to do. I've tried many different things, but nothing seems to work.
866
Below is the default configuration of event handler from rivets website:
// Augment the event handler of the on-* binder
handler: function(target, event, binding) {
this.call(target, event, binding.view.models)
}
So apart from the event object, you can also get a reference to the models related to the particular binding as second argument.
Using which you can access the particular object
For example
<div rv-each-thing="data.things">
<input type=button value="Click" rv-on-click="abc">
</div>
function abc(event,rivetsBinding){
rivetsBinding.thing //heres your thing :)
}
Sorry if I'm late, just started using Rivets and had come across the same problem.
Solution: Bind your function first
For example you have a function:
function customOnClickCallback(event, item) {
console.log(event);
console.log(item);
console.log(item.thing); // Instead of {{ thing }}
}
First you bind your function to be called (I'll be binding it to the Body for now):
rivets.bind(document.getElementsByTagName("body")[0], {
customOnClick: customOnClickCallback
});
Then you can use customOnClick as your rv-on-click
<input type=button value="Click" rv-on-click="customOnClick">
As for accessing your variable thing, it should be accessible as item.thing.
22
Here is something how i gone through this. Just copy and paste working examples below
Solution 1
<body>
<div rv-each-book="model.books">
<button rv-on-click="model.selectedBook | args book">
Read the book {book}
</button>
</div>
</body>
<script type="text/javascript">
rivets.formatters["args"] = function (fn) {
var args = Array.prototype.slice.call(arguments, 1);
return function () {
return fn.apply(null, args);
};
};
rvBinder = rivets.bind(document.body, {
model: {
selectedBook: function (book) {
alert("Selected book is " + book);
},
books: ["Asp.Net", "Javascript"]
}
});
</script>
Or an alternate approach is binding event
Solution 2
<body>
<div rv-each-book="books">
<a rv-cust-href="book">
Read the book {book}
</a>
</div>
</body>
<script type="text/javascript">
rivets.binders['cust-href'] = function (el, value) {
//el.href = '/Books/Find/' + value;
//OR
el.onclick = function () { alert(value); };
}
rvBinder = rivets.bind(document.body, {
books: ["Asp.Net", "Javascript"]
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
