admin管理员组

文章数量:1304170

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.

  • javascript
  • rivets.js
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
Add a ment  | 

3 Answers 3

Reset to default 5

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

本文标签：

版权声明：本文标题：javascript - Rivets.js: When button is clicked, call a function with an argument from a data binding - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741779239a2397208.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。