how to pass input parameter into function through rv-on-xxx

[ericxin1982]

Hi All,

I'd like to pass something to function through rv-on-blur
rv-on-blur="item.dd('1')"

But it fails, how to do, anyone can teach me?

Thanks
Eric Xin

[Kamil Dąbrowski]

Rivets does not analyze item.dd('1') as JavaScript expression/statement as Angular or some other libraries/frameworks do.

You could define args formatter:

rivets.formatters.args = function(fn) {
    let args = Array.prototype.slice.call(arguments, 1)
    return () => fn.apply(null, args)
}

and then:

rv-on-blur="item.dd | args 1"

[ericxin1982]

Thanks.
Array.prototype.slice.call(arguments…
Where arguments comes from above?
Is it a built-in keyword?

Thanks

[Kamil Dąbrowski]

Is it a built-in keyword?

arguments is built-in keyword in JavaScript.

[ericxin1982]

Thanks so much!
Get learned.

[ericxin1982]

Sorry to ask one more question.
rv-on-keypress="item.detect | jump event elementID"

If I define a formatters named jump, how I can pass in an keypress event to function jump?
Since jump here need two functions, one is event, another is element ID, which I would need it to be focused after key press takes place.

Thanks

[ericxin1982]

example.pdf
Hi I use the way you teach, but I got problem, please help me take a look at it.

[ericxin1982]

code.txt
For easier testing, please use txt instead, thanks very much!

[ericxin1982]

Anyone can help me here?

[Greg Larrenaga]

@ericxin1982 I would like to help you.
Can you explain exactly what this is supposed to do?
rv-on-keypress="item.detect | jump event elementID"

If you write it out in psuedo code I can try and implement for you.

For Example:
When the user presses a key on this element, I want to call the detect method on the item with some information?

[ericxin1982]

@Duder-onomy , Thanks.
So detect originally is like this, detect keypress is a enter code, if yes, return value set false, and move focus to another element by its ID.
But as I know, rivets.js does not support detect('xxxx') this way as putting element ID as input parameter, and harcode the elementID inside the function scope is not acceptable to me, so I have to use formattor this way to proceed detect this operation and create a formattor named jump accepts the second parameter as element ID to focus to different element ID.

Right now I get stuck on the jump this formattor, it seems not able to detect the event object through this way, maybe I am using the wrong way.

Hope you can help me.

detect:function(event){
if (event.keyCode === 13){
event.returnValue = false;
//document.getElementById('xx').focus();
}
}

Thanks again.
Eric Xin

[Jean-Christophe Cazeaux]

Hi, you should use the args formatter @Namek gave above.
In your case it will be used like this

rv-on-keypress="item.detect | args 'elementID'"

detect:function(event, elementID){
    if (event.keyCode === 13){
        event.returnValue = false;
        document.getElementById(elementID).focus();
    }
}

[ericxin1982]

(td) id="yy" rv-edit="item.edit" rv-on-keypress="item.detect | merge 'xx'">January (td)

detect:function(event,elid){
console.log(event.keyCode);
console.log(elid);
if (event.keyCode === 13){
event.returnValue = false;
document.getElementById(elid).focus();
}
}

rivets.formatters.merge = function(fn){
let args = Array.prototype.slice.call(arguments, 1)
return () => fn.apply(null, args)
};

Hi @jccazeaux

This is the snippet from completed code, I set console.log inside detect, so like this, I can not capture event object and elid string, they are all undefined.

How to fix?
What is wrong for the code?

Thanks

[ericxin1982]

code.txt
Hi @jccazeaux
This is the code I do debug, would you please take a look at it?
Thanks

[ericxin1982]

I probably would use the input parameter to bind inside the element as parameter passed way. Thanks all.

[Jean-Christophe Cazeaux]

@ericxin1982 my bad I missed a point. Rivets sends by default the event in the event callback. But our args formatter replaced it. To prevent this here is the actual args code

rivets.formatters.args = function(fn){
  let args = Array.prototype.slice.call(arguments, 1);
  return function()  {
    return fn.apply(this, Array.prototype.concat.call(arguments, args))
  }
};

Like this it will concatenate args parameters to configured parameters in rivets configuration. Configured parameters are described here (see handler attribute)

Here is a full working example

https://jsfiddle.net/jccazeaux/xjbftbns/

[ericxin1982]

Thanks very much!

At 2016-10-12 04:37:21, "Jean-Christophe Cazeaux" [e-mail] wrote:

@ericxin1982 my bad I missed a point. Rivets sends by default the event in the event callback. But our args formatter replaced it. To prevent this here is the actual args code

rivets.formatters.args=function(fn){
let args =Array.prototype.slice.call(arguments, 1);
returnfunction() {
returnfn.apply(this, Array.prototype.concat.call(arguments, args))
}
};

Like this it will concatenate args parameters to configured parameters in rivets configuration. Configured parameters are described here (see handler attribute)

Here is a full working example

https://jsfiddle.net/jccazeaux/xjbftbns/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ericxin1982]

Hi @jccazeaux

Thanks for your help.
I went to jsfiddle.net, which does not work, but I console log it for details.

Should just pass arguments[0], pass whole arguments does not work actually.

return fn.apply(this, Array.prototype.concat.call(arguments[0], args))

Then it works.

I appreciate your help, which give me a deeper vision into javascript.

Eric Xin

[Ritesh Pahwa]

Hello All,

I am rewriting parts of rivetsjs and tinybind, look at https://jsfiddle.net/riteshpahwa/feqt9a7b/
and if anyone wants to help, more then happy to add tasks. https://github.com/RADKick/kickjs/

It is in initial stage, so any of your input / feedback / contribution to code will be very helpful.