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.
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.
Share Improve this question asked Sep 21, 2015 at 10:56 paulwal222paulwal222 1,53811 silver badges18 bronze badges 3-
rv-on-click="abc( {thing} )"rivetsjs./docs/reference/#on-[event] You need to read what 2 way binding is, and use the documentation of the binding library. – Pogrindis Commented Sep 21, 2015 at 11:46 - Nope. I definitely tried that, and it doesn't work. Gives this error: Uncaught TypeError: this.call is not a function / t.public.handler @ rivets.bundled.min.js:6 / t.Binding.e.eventHandler @ rivets.bundled.min.js:6 / n.event.dispatch @ jquery-2.1.4.min.js:3 / n.event.add.r.handle @ jquery-2.1.4.min.js:3 – paulwal222 Commented Sep 21, 2015 at 13:11
-
The only working solution I found is using a function that is a member of {thing}, which seems ridiculous to me. So:
rv-on-click="thing.my_function"– paulwal222 Commented Sep 21, 2015 at 13:14
3 Answers
Reset to default 5Below 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 e 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.
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>