Stupid JavaScript Thread

Captain

This is the thread where people can ask stupid questions about JavaScript.

Here goes!

I have:

var ViewModel = function (data) {
  var self = this;
  
  ko.mapping.fromJS(data, {}, self);

  var Current = function (idx) {
    this.index = ko.observable(idx);
    this.number = ko.computed (function () { return this.index + 1 });
    this.question = ko.computed({
      read: function () {
        return self.questions()[this.index()];
      },
      write: function (question) {
        self.questions()[this.index()](question);
      },
      owner: self
    });
  };
  self.current = Current(0);
};

My browser is telling me that index is undefined in

read: function () {
        return self.questions()[this.index()];
      },

W-T-F?

Edit: I think I get it. Each function must have its own this in scope. I told you it was a stupid question.

darkmatter

@Captain said:

Edit: I think I get it. Each function must have its own this in scope. I told you it was a stupid question.

In order to reference the originator object from inside the internal closures, you need a local reference to the originator's this.

cartman82

Perhaps...

var ViewModel = function (data) {
  var self = this;

  ko.mapping.fromJS(data, {}, self);

  var Current = function (idx) {
    var that = this;
    this.index = ko.observable(idx);
    this.number = ko.computed (function () { return this.index + 1 });
    this.question = ko.computed({
      read: function () {
        return self.questions()[that.index()];
      },
      write: function (question) {
        self.questions()[that.index()](question);
      },
      owner: self
    });
  };
  self.current = Current(0);
};

chubertdev

JavaScript, the client-side PHP WTF.

chubertdev

(expletive)

    var cliList = clientListProperties.ClientList;

    clientListProperties.ClientArray.length = 0;

    cliList.length = 0;
    clientArrayMaster.length = 0;

ben_lubar

@chubertdev said:

var cliList = clientListProperties.ClientList;
clientListProperties.ClientArray.length = 0;

cliList.length = 0;</blockquote>
Why do you have a client list ~~and~~containing a client array?

chubertdev

@ben_lubar said:

Why do you have a client list andcontaining a client array?

I don't, the co-worker that I'm going to smack around with a trout for a bit does.

HardwareGeek

@chubertdev said:

cow-orker

FTFY. If you're going to hyphenate it, at least hyphenate it correctly.

apapadimoulis

TypeScript! It like going from explosive diarrhea to a pile of feces.

Frank

@cartman82 said:

var that = this;

That would work.

Frank

@darkmatter said:

reference the originator object from inside the internal closures

Victimized by this simple (of course...yea...makes sense) thing once before...In google maps development.

Very nice explanation BTW.

Frank

And if we are all getting smarter...Might as well reference the Mozilla closures explanation page with some examples and approaches

Closures - JavaScript | MDN

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is...

Zecc

Haven't used Knockout, only read about it, but try this:

var ViewModel = function (data) {
  var self = this;

  ko.mapping.fromJS(data, {}, self);

  var Current = function (idx) {
    this.index = ko.observable(idx);
    this.number = ko.computed (function () { return this.index() + 1 }, this);
    this.question = ko.computed({
      read: function () {
        return self.questions()[that.index()];
      },
      write: function (question) {
        self.questions()[that.index()](question);
      },
      owner: this
    });
  };
  self.current = Current(0);
};

Note that:

a) ko.observable and ko.computed return functions, so references to properties should be function calls;

b) the owner Current object is passed to ko.computed() either as second argument (in the case of this.number) or as the "owner" attribute (in the case of this.question)

In any case, "self" and "that" are terrible names and you should use something like "thisModel" and "thisCurrent".

darkmatter

@Zecc said:

"self" and "that" are terrible names

"self" is a bit of a lie, "that" isn't too bad. "owner" probably makes the most sense. Or "objectInstanceXs_this" to be overly verbose ;)?

Yamikuronue

I usually see "currThis" as in "The current context's 'this' if we ignore the fact that we've entered a closure". But then, this is from the same people who insist that "x" is the best variable name for aliasing foo.bar.baz.someotherbar.foo.bar[i].bat inside a loop because "x marks the spot"

cartman82

@Zecc said:

In any case, "self" and "that" are terrible names and you should use something like "thisModel" and "thisCurrent".

In my own code, I'm always using thisTheNameOfTheConstructor. If I have to use this at all (IMO it's best to avoid it altogether).

Onyx

@chubertdev said:

JavaScript, the client-side PHP WTF.

We have that. We have that in stereo baby!

http://phpjs.org/about/

Frank

x or i or j or all three in a nice obfuscated clever function usually a placeholder var and a loop within a loop.

I try to be verbose on such things. Especially if things are nested and confusing to begin with.

Filed under: I preach but I have done it too.

Onyx

So yeah, I have a stupid question. FF started screaming at me for having a synchronous request in my main loop, and that I shouldn't do that. I agree FF, I agree.

But how in the heck do I force a function into another thread in JS?

Yamikuronue

i and j and sometimes k are for storing the loop counter. "x" is for referring to a deep object without having to repeat the lookup every time you want to access it. For whatever reason I'm fine with i but not okay with x.

Onyx

@Yamikuronue said:

For whatever reason I'm fine with i but not okay with x.

It's your indispensable incremental iterator.

If anything, it needs more is. Maybe a regular one followed by the Turkish one, followed by the Ukrainian one?

Filed under: Too lazy to look up unicode values

Captain

What does the code look like?

Onyx

It's just jQuery's $.ajax with asyc: false. It's getting templates and required data to render them so I can't really do much before they are fetched (other than doing some stupid loop or something until variables populate).

The pattern is pretty much:

function getStuff(param, ... )
{
    var stuff = null;

    $.ajax(
    {
        type: 'get',
        async: false,
        dataType: 'json',
        url: 'getStuff.php',
        data: {someparam: value, ...},
        success: function(data, textStatus, jqXHR)
        {
            // Do stuff to it if needed
            stuff = data;
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Error handling gubbins
        }
    });

    return stuff;
}

Only one function is always called on "reload", templates get cached when possible, but it's still annoying.

locallunatic

@Yamikuronue said:

the same people who insist that "x" is the best variable name ... because "x marks the spot"

Please tell me that they were making a joke or that you immediately conducted some workplace violence upon them (and preferably some other violence on family members there of).

cartman82

Don't understand the question.

If you want something to happen async, pretty much the only solutions (outside of node.js) are setInterval and setTimeout. Not sure how this fits with your problem.

Onyx

I have synchronous requests running. Which is fine, I'm fetching stuff I need to render the page, no point in async, so I have the obligatory spinner while it loads, and that's fine.

But FF complains about synchronous requests being run "in main thread". And if I incur a large data load, it does indeed seem to cause FF to stutter while request waits for completion.

I want to know if I can spin it off in a different thread so it:

Stops FF from complaining
Stops FF choking on larger requests

Now, how to force a JS engine to dispatch a function to a different thread, I have no idea. I'm pretty sure they can do that, can't they?

cartman82

Sorry, I wrote that before I saw your code.

Not gonna preach about using deprecated WTF-y patterns.

The only thing that comes to mind is:

setTimeout(function () {
   $.ajax( {
      async: false,
      /*...*/
    });
}, 1);

That will defer the execution into the next run cycle. By then, the browser might finish whatever it was doing in DOM and let you run your wait cycle in peace. Other than that, there's no way to tell the browser to run something in a different thread as javascript is, I believe, single-threaded.

Onyx

@cartman82 said:

Not gonna preach about using deprecated WTF-y patterns.

Don't worry, known and in the process of cleaning all that shit up, ASAP.

Granted, I am the source of this, but I poked around jQuery looong time ago (1.4?), then left it be, and then had to take it up again as this project was starting up. So I made more than one error since I was still basically learning both jQuery and Javascript proper.

I pretty much have it all working now, and since it's feature freeze right now I'm slowly going through all the code, cleaning it up and fixing my fuckups as I go.

@cartman82 said:

Other than that, there's no way to tell the browser to run something in a different thread as javascript is, I believe, single-threaded.

Wait, just thought of something. A bit of googling suggest that you can do threading in FF's addons. I'll try disabling them tomorrow and see what happens. I have this nagging suspicion it might be Firebug doing something wonky.

Captain

It's not Firebug. It's intended behavior.

Synchronous and asynchronous requests - Web APIs | MDN

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

It looks like you have to use a Worker, whatever that is. Looks like it's a monad for running synchronous calls in order, in their own thread. (But I haven't read more than the page I linked)

Nagesh

@chubertdev said:

I don't, the co-worker that I'm going to smack around with a trout for a bit does.

Is that going to hurt? Also if you are in US of A, will he not sue you to the bone?

Onyx

@Captain said:

It looks like you have to use a Worker, whatever that is. Looks like it's a monad for running synchronous calls in order, in their own thread. (But I haven't read more than the page I linked)

Ok, now that looks like a standard multithreading deal. The question is, how's the support?

Can I use... Support tables for HTML5, CSS3, etc

Well... surprisingly good in fact. I think I can use it then! IE10 should be the minimum for our app anyway and I'm not worried about other browsers that much since they are mostly always updated.

Thanks for the link.

locallunatic

It's a thing from IRC @Nagesh. Look it up, I'm sure you can find things explaining it.

chubertdev

/trout @Nagesh

Maciejasjmj

@Yamikuronue said:

currThis

this
this2
currThis
currThis_real
this_donotuse
this_20140517

ben_lubar

@Maciejasjmj said:

this
this2
currThis
currThis_real
this_donotuse
this_20140517

curThis
currrThis
THIS

Yamikuronue

@ben_lubar said:

curThis

Not to be confused with thisCur, who inherits the Dog prototype

Captain

I feel dirty writing this, even though I have a technical reason:

<!-- ko if: state.notReviewing -->

Unfortuantely, Knockout's if binding only refreshes when consumes observables. And while state.reviewing is an observable, logical combinations of observables are not observable. So instead of doing:

<!-- ko if: !state.reviewing() -->

or

<!-- ko if: state.writing() || state.paused() -->

I have to roll the logic into a function and make it observable.

FrostCat

Necroing this thread so I can say that the last post is entertaining; it puts me in mind of what I assume someone who speaks only Mandarin feels like when hearing Cantonese.

Captain

So Knockout is a pretty neat Javascript templating system that consumes what it calls "observables". These are functions that return data for the system to render (and you can update the values and their dependencies by setting the observable). I complained because static bool values aren't observables" and JavaScript isn't rich enough to make them observable. So I have to wrap logic into a function called notReviewing.

FrostCat

@Captain said:

So Knockout is a pretty neat Javascript templating system that consumes what it calls "observables".

https://www.youtube.com/watch?v=acI12jO0HSQ