Back to Questions
5.5k
views5
comments
Accessing JavaScript's this from WebSharper
websharper

I feel a bit dumbfounded at how I have yet to find how to access the JavaScripts this keyword from WebSharper client code.

I tried something like this:

1
2

[<Inline "$this">]
let this() = X<obj>

But this spits out $this in the generated js code which doesn't seem to refer to the correct scope object.

It feels that I shouldn't have to write any extra code though and that it should be part of the API.

Thanks

.

Hi David, sorry for the late reply.

Capturing `this` is a bad idea.

It is WebSharper policy to provide a degree of hygiene. The meaning of `this` keyword in JavaScript is only well-defined in a context of a lambda function. Currently WebSharper is left free to introduce and eliminate lexical lambda scopes - this would be impossible to do correctly if the programs relied on `this`.

WebSharper has other facilities. For example, when defining instance inline or direct methods, `$this` refers to the instance object. Another example is delegates - these are used in WebSharper to type JavaScript methods that pass information through the `this` parameter. `jQuery.each` is one such method - it passes the current DOM node as `this` parameter to the callback. In WebSharper you can capture that using a delegate:

1

JQuery.Of("main").Each(Func<_,_,_>(fun self i -> ()))
By on 5/3/2013 5:52 AM ()

Yes I figured there was some sanity behind avoiding the use of this.

Besides, I like the idea that when composing markup on the client side I can capture let bindings for anything I want and not rely on scouting the DOM/use jQuery, which is what we ended up doing.

Thanks for getting back to me.

David

By on 5/3/2013 6:57 AM ()

Note that we found more F# idiomatic way of doing this. But knowing how to do this would still be a plus.

By on 5/2/2013 8:24 AM ()

Have you shared this somewhere? I'd be curious to see it.

By on 8/6/2013 9:36 PM ()

Hi Ryan,

I elaborated on StackOverflow. Essentially, since I mostly create my HTML content on the client side using the WebSharper combinators, I seldom have to resort to something like jQuery to query the DOM and retrieve an element. Instead, being able to keep a reference to any element created is simpler (and likely more efficient).

In my particular use-case, I had to register some form of callback in the Kendo grid. It turns out that in that context, this was referring to the grid which I could easily keep a reference to on creation solving the problem.

By on 8/7/2013 10:53 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper