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:
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:
JQuery.Of("main").Each(Func<_,_,_>(fun self i -> ()))
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
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
Note that we found more F# idiomatic way of doing this. But knowing how to do this would still be a plus.
Have you shared this somewhere? I'd be curious to see it.
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.
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.
Topic tags
- f# × 3667
- compiler × 263
- functional × 200
- websharper × 123
- c# × 119
- classes × 96
- web × 94
- book × 84
- .net × 82
- async × 72
- parallel × 43
- server × 43
- parsing × 41
- testing × 41
- asynchronous × 30
- monad × 28
- ocaml × 26
- tutorial × 26
- haskell × 25
- workflows × 22
- html × 21
- linq × 21
- introduction × 19
- silverlight × 19
- wpf × 19
- fpish × 18
- collections × 14
- pipeline × 14
- templates × 12
- monads × 11
- opinion × 10
- reactive × 10
- plugin × 9
- scheme × 9
- sitelets × 9
- solid × 9
- basics × 8
- concurrent × 8
- deployment × 8
- how-to × 8
- python × 8
- complexity × 7
- javascript × 7
- jquery × 6
- lisp × 6
- real-world × 6
- workshop × 6
- xaml × 6
- conference × 5
- dsl × 5
- java × 5
- metaprogramming × 5
- ml × 5
- scala × 5
- visual studio × 5
- formlets × 4
- fsi × 4
- lift × 4
- sql × 4
- teaching × 4
- alt.net × 3
- aml × 3
- enhancement × 3
- list × 3
- reflection × 3
- type provider × 3
- blog × 2
- compilation × 2
- computation expressions × 2
- corporate × 2
- courses × 2
- cufp × 2
- enterprise × 2
- entity framework × 2
- erlang × 2
- events × 2
- f# interactive × 2
- fsc × 2
- google maps × 2
- html5 × 2
- http × 2
- interactive × 2
- interface × 2
- iphone × 2
- iteratee × 2
- jobs × 2
- kendo × 2
- keynote × 2
- mvc × 2
- numeric × 2
- obfuscation × 2
- oop × 2
- packaging × 2
- pattern matching × 2
- pipelines × 2
- rx × 2
- script × 2
- seq × 2
- sockets × 2
- stm × 2
- tcp × 2
- trie × 2
- type × 2
- xna × 2
- zh × 2
- .net interop × 1
- 2012 × 1
- abstract class × 1
- accumulator × 1
- active pattern × 1
- addin × 1
- agents × 1
- agile × 1
- alter session × 1
- android × 1
- anonymous object × 1
- appcelerator × 1
- architecture × 1
- array × 1
- arrays × 1
- asp.net 4.5 × 1
- asp.net mvc × 1
- asp.net mvc 4 × 1
- asp.net web api × 1
- aspnet × 1
- ast × 1
- b-tree × 1
- bistro × 1
- bug × 1
- camtasia studio × 1
- canvas × 1
- class × 1
- client × 1
- clojure × 1
- closures × 1
- cloud × 1
- cms × 1
- coding diacritics × 1
- color highlighting × 1
- combinator × 1
- confirm × 1
- constructor × 1
- continuation-passing style × 1
- coords × 1
- coursera × 1
- csla × 1
- css × 1
- current_schema × 1
- data × 1
- database × 1
- declarative × 1
- delete × 1
- dhtmlx × 1
- discriminated union × 1
- distance × 1
- docs × 1
- documentation × 1
- dol × 1
- domain × 1
- du × 1
- duf-101 × 1
- eclipse × 1
- edsl × 1
- em algorithm × 1
- emacs × 1
- emotion × 1
- error × 1
- etw × 1
- euclidean × 1
- event × 1
- example × 1
- examples × 1
- ext js × 1
- extension methods × 1
- extra × 1
- facet pattern × 1
- fantomas × 1
- fear × 1
- float × 1
- fp × 1
- frank × 1
- fsdoc × 1
- fsharp.core × 1
- fsharp.powerpack × 1
- fsharpx × 1
- function × 1
- functional style × 1
- gc × 1
- generic × 1
- geometry × 1
- getlastwin32error × 1
- google × 1
- group × 1
- hash × 1
- history × 1
- hosting × 1
- httpcontext × 1
- https × 1
- hubfs × 1
- ie 8 × 1
- if-doc × 1
- inheritance × 1
- installer × 1
- interpreter × 1
- io × 1
- ios × 1
- ipad × 1
- kendochart × 1
- kendoui × 1
- learning × 1
- licensing × 1
- macro × 1
- macros × 1
- maps × 1
- markup × 1
- marshal × 1
- math × 1
- metro style × 1
- micro orm × 1
- minimum-requirements × 1
- multidimensional × 1
- multiline × 1
- multithreading × 1
- mysql × 1
- mysqlclient × 1
- nancy × 1
- nested × 1
- nested loops × 1
- node × 1
- object relation mapper × 1
- object-oriented × 1
- offline × 1
- option × 1
- orm × 1
- osx × 1
- owin × 1
- paper × 1
- parameter × 1
- performance × 1
- persistent data structure × 1
- phonegap × 1
- pola × 1
- powerpack × 1
- prefix tree × 1
- principle of least authority × 1
- programming × 1
- projekt_feladat × 1
- protected × 1
- provider × 1
- ptvs × 1
- quant × 1
- quotations × 1
- range × 1
- raphael × 1
- razor × 1
- rc × 1
- real-time × 1
- reference × 1
- rest × 1
- restful × 1
- round table × 1
- runtime × 1
- scriptcs × 1
- scripting × 1
- service × 1
- session-state × 1
- sitelet × 1
- sqlentityconnection × 1
- standards × 1
- stickynotes × 1
- stress × 1
- strong name × 1
- structures × 1
- tdd × 1
- template × 1
- text parsing × 1
- tracing × 1
- tsunamiide × 1
- type inference × 1
- type providers × 1
- typescript × 1
- upload × 1
- vb × 1
- vb.net × 1
- vector × 1
- visual f# × 1
- visual studio 11 × 1
- visual studio 2012 × 1
- visual studio shell × 1
- visualstudio × 1
- web api × 1
- webapi × 1
- windows 7 × 1
- windows 8 × 1
- windows-phone × 1
- winrt × 1
- xml × 1
- yield × 1
- zarovizsga × 1
Copyright (c) 2024 IntelliFactory. All rights reserved. | | | Trainings | | | |
Built with |
I tried something like this:
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