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

问题

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.

回答1:

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 :)
}

回答2:

Here is something how i gone through this. Just copy and paste 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 an alternate approach is 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>

回答3:

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.

来源：https://stackoverflow.com/questions/32693453/rivets-js-when-button-is-clicked-call-a-function-with-an-argument-from-a-data

标签

javascript

rivets.js