All geek questions in one place

Rivets.js: When the button is pressed, call the function with an argument from the data binding

It is so enraging. It sounds like it should be that simple, but I can't find a magic spell.

Here is the gist of what I need to do:

<div rv-each-thing="data.things"> <input type=button value="Click" onclick="abc( {thing} )"> </div>

This should show what I need to do. I have tried many different things, but nothing works.

+7
source share
4 answers

The following is the default event handler configuration from the rivet site:

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

Thus, in addition to the event object, you can also get a link to models associated with a specific binding as a second argument.

With which you can access a specific object

for instance

  <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 :) }
+5
source

This is how I went through this. Just copy and paste the working examples below.

 <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 alternative approach - binding event

 <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>
0
source

Sorry if I was late, just started using rivets and ran into the same problem.

Solution : first bind your function

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 associate your function with the call (now I will associate it with the Body):

 rivets.bind(document.getElementsByTagName("body")[0], { customOnClick: customOnClickCallback });

Then you can use customOnClick as rv-on-click

 <input type=button value="Click" rv-on-click="customOnClick">

As for access to your thing variable, it should be available as item.thing .

0
source 
  rivets.configure({ handler: function(el, event, rivetsModel){ var fn = new Function('obj', 'return obj.' + rivetsModel.keypath) fn(this)(el, event, rivetsModel.view.models) } }) ... function abs(el, event, models) { models.xxx.xxx } ... <button rv-on-click="abs"></button>
0
source

Source: https://habr.com/ru/post/1231941/

More articles:


All Articles