Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Well, I'm going to repost my question from the javascipt thread here:

How should I separate view data from server data?

If I have a view such as this (rendered as HTML):
HTML code:
<select multiple>
	<option value="1" selected>Butt</option>
	<option value="2" selected>Arse</option>
	<option value="3">Rump</option>
</select>

(The user has selected the first two values) Then some refresh script in the background updates the model, with
JavaScript code:
{
	1:"Butt",
	2:"Arse",
	3:"Rump",
	4:"Buns"
}
How do I preserve the user's selection when I re-render the select in response to "change:butts" event? The "selected" state is part of the view's state, it's not something that is synchronized back to the server, but it should not be lost just because an element changed.

Yes, this is specific to Backbone, since that's the only framework I've used. Do other frameworks somehow automatically separate model data from view data with some kind of converters in between?

Adbot
ADBOT LOVES YOU

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Skiant posted:

He really fancies that a lot, and it looks like _.defer() is doing just that. Is that right?

No. _.defer(someFunction) basically means window.setTimeout(someFunction, 0);

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

hedgecore posted:

It sounds like a bad idea to refresh a view/form field the user is actively filling out. Is there another way you can structure this? How would this behave outside of a MV* environment?

But isn't that the whole point of using models that fire change events? You just render your view whenever you feel like it, whether or not you have fresh data, and then just update the view when a change event comes in.

A MIRACLE posted:

Knockout.js does this with ko.computed. I love knockout but it's probably easier to uhh, not change up your framework in the middle of a project.

I don't use backbone for anything at the moment. I used it in a project a year ago. A current project I have inherited uses all the worst practices of from 2002, and might at some point get refactored into using some framework.

Currently I'm just slowly refactoring a 5000+ line file filled with (at best) inline HTML, but usually var div = document.createElement('div'); div.appendChild(document.createTextNode('This text isn't even dynamic, why would you do this'));. All the functions in that shitheap are going to be strict mode and use templates.

e: forgot to reply, but judging from the name "computed" sounds like exactly what I'm after in this case. Is knockout still being developed? A coworker was pretty excited about it a couple of years ago, but he said that it had been abandoned.

Wheany fucked around with this message at 18:09 on Sep 20, 2013

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
I think I want to use React and Bootstrap together in a project. The reason is that React seems pretty nifty for building view components, and I like Bootstrap's layout, especially the responsive layout bits (from the little I've seen over a coworker's shoulder).

How dumb am I and how hopeless is this? Have I completely misunderstood what Bootstrap is for even?

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Hmm, Ember seems like it's superficially well documented, like the store's find function:
http://emberjs.com/api/data/classes/DS.Store.html#method_find

The documentation says that the function returns a promise. Fine. That means I can call then() on it. What arguments does then() get called with in the different scenarios?

DS.RecordArray when you call find without an id, a single model when you call find with an id

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
In Ember, I currently have a Google maps view (i.e. it extends Ember.View) that shows vehicles markers on the map. It currently doesn't do anything except add the markers on the map, but later I want it to update the vehicles' coordinates in real time every time the vehicle collection is updated, either from the browser or when data is refreshed from the server. I tried just changing the coordinates of the vehicles from the browser's console, but that didn't work, understandably.

Currently I access the vehicles like this, but it feels wrong: this.get('controller').get('store').find('vehicle').then(myCallback);

This is a component that is always visible in the app, so it's not associated with a particular route, so setting a model in the route object doesn't sound right either.

How should I provide the vehicles (and later other collections) to the view and then get notified for changes in any of them? Can I .observe() the store? Should I?

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Also, when using DS.RESTAdapter, your API endpoint has to be at the root of the host, or on some fixed path?

AFAIK there is no way of using a relative path except by configuring the adapter with "namespace: window.location.pathname.substring(1)", which also smells wrong to me.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

In Ember, I currently have a Google maps view (i.e. it extends Ember.View) that shows vehicles markers on the map. It currently doesn't do anything except add the markers on the map, but later I want it to update the vehicles' coordinates in real time every time the vehicle collection is updated, either from the browser or when data is refreshed from the server. I tried just changing the coordinates of the vehicles from the browser's console, but that didn't work, understandably.

Currently I access the vehicles like this, but it feels wrong: this.get('controller').get('store').find('vehicle').then(myCallback);

This is a component that is always visible in the app, so it's not associated with a particular route, so setting a model in the route object doesn't sound right either.

How should I provide the vehicles (and later other collections) to the view and then get notified for changes in any of them? Can I .observe() the store? Should I?

Well, I haven't gotten so far as to get this thing actually working as it should, but I'm going to use a MapController that has a visibleVehicles property that will change. I can observe that at least.

Now, on to my current problem: is there a way to set the default selection in a {{select multiple}}? I have this:
code:
{{view Ember.Select multiple=true
	content=vehicles
	optionValuePath="content.id"
	optionLabelPath="content.name"
	selection=selectedVehicles
	size=7
}}
It works in that I can get a list of selected vehicles from the selectedVehicles property. But how should I set the property so that selectedVehicles contains the vehicle with id 0 ("all vehicles") when the user enters the route. I'm fine with just doing a vehiclesController.set('selectedVehicles', [get vehicle id 0 from the model or even the store]), but there are so many asynchronous bits and bobs involved that I'm not sure how and when I'm supposed to do that.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

I'm fine with just doing a vehiclesController.set('selectedVehicles', [get vehicle id 0 from the model or even the store]), but there are so many asynchronous bits and bobs involved that I'm not sure how and when I'm supposed to do that.

Okay, turns out this is what I needed to do:
In the route's setupController:
JavaScript code:
setupController: function (controller, model) {
	this._super(controller, model);

	// model.vehicles is a DS.PromiseArray
	model.vehicles.then(function () {
		controller.set('selectedVehicles', [model.vehicles.findBy('id', '0')]);
	});
}

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Man I wish all these frameworks would take an immediate timeout in the documentation when they introduce some cute/non-obvious functionality.

Examples being Ember's function prototype extensions for computed properties and observers (meaning stuff like getButt: function(){}.property('leftCheek', 'rightCheek')) and Angular's usage of function.toString() and then parsing the parameter names from the string representation for dependency injection.

When I notice things like that, it's like an immediate needle scratch moment and I spend the next several minutes trying to find out what the hell is happening.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Why is Ember's API documentation so poo poo?

http://emberjs.com/api/classes/RSVP.html#method_all

quote:

This is a convenient alias for RSVP.Promise.all

gently caress you too.

This wouldn't be that bad it there was actual documentation for RSVP.Promise.all, but there isn't. Instead, if you look at http://emberjs.com/api/classes/RSVP.Promise.html, you may find the last code example before the method listing, titled "Unlike callbacks, promises are great composable primitives.", where the code example nonchalantly shows that the callback given to "then" function gets an array of values, and not for example the values themselves as arguments.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Stoph posted:

In their defense, promises are pretty much part of the language now. Some promise libraries have helpers to mitigate that issue, for example Bluebird has Promise.prototype.spread:


https://github.com/petkaantonov/bluebird/blob/master/API.md#spreadfunction-fulfilledhandler--function-rejectedhandler----promise

(promises can't resolve to more than 1 argument by default)

... Or, you could actually document what your API does.

Quick: If you define an attribute in you model in Ember data using DS.attr('number'), then do a get('your_attribute') and the value is not set? How do you test if a "not set" value was returned? Assume 0 is a valid value for your attribute. The API documentation mentions that "you can specify an optional type to have the value automatically transformed." Does that mean that if the value is undefined, it is automatically converted to NaN as Number(undefined) is NaN? Or maybe a zero since Number(null) is 0? Does it just return null or undefined as-is?


It uses Ember.isEmpty(value) ? null : Number(value), so it always returns null when the value is null, undefined, empty string or an empty array. Also I guess you should also test for NaN, since "qwerty" is "non-empty", but it converts into NaN

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
What is the state of the art with asynchronous script loading/dependency resolution? I tried $script.js but turns out it's too simple for us. I'm not sure if I want to go all the way and start using modules, especially since I don't think all our libraries even support that.

I'm currently looking at LABjs, which hasn't updated in years (because it's stable and "done", apparently).

I "just" want to give a list of files to load, that are loaded as asynchronously as possible, but also say that "file_a.js must be run before file_b.js because file_b.js depends on file_a.js" (apparently this is easier said than done).

Some of the files are external libraries, like Ember, jQuery and Moment, so I can't easily wrap them into callbacks. Or I could, but it would be a maintenance nightmare.

So I need to be able to say "load jQuery before Ember. Then when both are ready, run app.js", except many more levels because our models and controllers are in separate files.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Maybe I'll try that, at least I've heard of it before.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
So what should I do with modules that do not export anything, like jquery plugins and Ember app components?

JavaScript code:
define(['Ember', 'jquery', 'noty.layout'],
function (Ember, $, notyLayout /* uhh? */) {
	// I don't even need notyLayout for anything here, but there is a line that says
	$.noty.defaults.layout = 'topCenter';

	var app = Ember.Application.create();
	//...
	//...
	//...
	return app;	
})
Then again my own module:
JavaScript code:
 
define(['Ember', 'app'],
function (Ember, app) {
	'use strict';

	app.SomeController = Ember.ObjectController.extend({
	});

	// do I simply not return anything here because all I do is add the controller as an attribute to app?
});
Should I return app from the function?
Should I just use requirejs() for that function? Does that work when I need to access SomeController from another controller? Can I just use requirejs('SomeController') even when it doesn't return a value?

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

So what should I do with modules that do not export anything, like jquery plugins and Ember app components?
[snip]
Should I return app from the function?
Should I just use requirejs() for that function? Does that work when I need to access SomeController from another controller? Can I just use requirejs('SomeController') even when it doesn't return a value?

Okay, just shoving the non-module parameters to the end of the dependency list and just ignoring them in the argument list seems to work.
Also not returning anything seems to work too, so that's what I'm doing.

I made a separate "app-bootstrap" module that just does var app = Ember.Application.create() that I can add as a dependency to all my routes, controllers, models, views and other components that need "App" to exist to add properties to it.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Kobayashi posted:

You might look into Ember CLI too. Like everything Ember, it has its own take how to handle modules. I don't really know what half this stuff means, but I signed for Ember knowing that people smarter than me were going to impose their opinions my workflow, so best to just go with it.

Well, I guess I could do that too, but I'm kinda not looking forward to doing the same work the third time within a week. But if that is a clean (and supported) way of modularizing an Ember app, it's probably worth at least checking out. :smith:

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
This is just a guess, but I'd say that if the amount of selectors is the same, so the performance.

But what I don't understand is why you care what generated code looks like, if the source code is clean.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

bartkusa posted:

Have you measured the performance of your pages, and found CSS is actually the bottleneck?

I've written some terrible CSS, and found it didn't matter even 0.01% compared to my terrible Javascript.

I've seen a few articles about optimizing yout css and this is always what I've wondered as well. I could see the point of trying to minimize the size of the css file, if you serve google-amounts of data, but at what point does it start to matter if your selector is '.disabled[type="submit"]' instead of 'nav.lander section.search input.disabled[type="submit"]'?

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

Well, I guess I could do [Ember-CLI] too, but I'm kinda not looking forward to doing the same work the third time within a week. But if that is a clean (and supported) way of modularizing an Ember app, it's probably worth at least checking out. :smith:

Hmm, I like parts of the project structure, it seems to be mostly compatible with our current thing, except it wants dasherized-filenames and we use CamelCaseNames currently. That is not a huge problem, just rename the files. I also like the idea of using bleeding edge ES6 modules (I'm a web "developer" cowboy coder after all), and our files should be relatively easily convertible because it's usually just (function(){App.WhatEver=Ember.SomeClass.extend}());. I like the resolver automatically loading modules as needed without having to do a bunch of setup like with adding RequireJS. (RequireJS seemed to work fine except I didn't finish the conversion yet and stuff like models did not get loaded in the right order)

It seems that it's kind of a pain in the rear end to convert an existing project into the structure created by "ember init", but I'm going to try.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Kobayashi posted:

The TL;DR seems to be "aping cool features from React, avoiding the Angular 2.0 clusterfuck."

I appreciate that they openly give props to Angular and React, and don't speak of "other frameworks", for example.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
So ES6 modules are in strict mode by default, right?

That means that in a file like this:
JavaScript code:
import cheek from "buttock";

var butt = function () {
	return cheek(2):
};

export default butt;
...the butt function is also in strict mode, right?

Because JSHint is complaining to me about missing "use strict" in the function. I have the esnext-option set to true.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Okay, so running the latest jshint (2.5.10) from the command line seems to work as expected, but the one bundled with Idea (2.5.6) doesn't work :mad:

e: Nope, that wasn't it. Even version 2.5.6 works from the command line. :confused:

e2: enabled "use config files" and now it works even in Idea :iiam:

Wheany fucked around with this message at 19:38 on Nov 7, 2014

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Is there a way to minify Handlebars templates? I noticed that after building my ember-cli project, there is still a lot of redundant white space in the templates, poo poo like "<div><span class=\"butt\">cheeks</span>\r\n     <span class=\"fart\">poot</span></div>". Those linefeeds, carriage returns and spaces don't need to be there.

It's not like it's a huge deal, but I'm wondering if it's possible in the first place.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Ember question:

I want to show an InfoWindow when a user clicks a Google map marker.

I have a class for the map markers, they seem to work fine, their positions and visibility and all that update automatically when the underlying Ember-object changes.

But for the InfoWindow, I need a HTML text. Apparently there isn't a way to render a template file to string, then set that as the contentString of the InfoWindow. You can call Ember.Handlebars.compile to compile a template, but you need a template string for that.

Now I can just supply it with a template in JS code, but that kind of defeats the point of having template files.

Can I render a template file to a string and if so, how?

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Sedro posted:

You can bind a view's template name to a property on your controller/model.

Here's a jsbin I threw together.

I'm just going to steal all the codes. Thank you.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

I'm just going to steal all the codes. Thank you.

Just adopting that ended up being a billion times better than the poo poo we had before. Now there is some sense of structure in the google maps code.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Huragok posted:

Congratulations, you just won a new framework!

Well of course I have, it's a weekday with a "d" in its name.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
I thought I'd take a bold new step and write a "unit test"

So I went and read http://www.ember-cli.com/#testing

And surprise surprise, the documentation is real bad.

I can run "ember test" which will magically run all files through jshint, which it does anyway when building. I say magically, because as far as I know, the jshint-test has no file of its own.

"Test filenames should be suffixed with -test.js in order to run."
Sure, but where should I put them?
They even give me source code for a test that I could c&p to a file and run and have fail, if I knew where to save it.

:ssh: Under <projectdir>/tests/unit :ssh:

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Kobayashi posted:

Doesn't Ember CLI create unit test stubs whenever use generate? You could probably generate a few dummies to see what scaffolding it spits out and where for a more practical example.

Holy poo poo.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
I just ran into this: http://stackoverflow.com/questions/26687039/having-trouble-unit-testing-a-helper-from-an-addon-project

I.e. the generated unit test for a handlebars helper simply does not work.

Except the solution that dude found, accessing the _rawFunction property, does not work, because of course it doesn't (_rawFunction is undefined). This is Ember and it worked 2 months ago, why would it work anymore?

"// Replace this with your real tests." is not a very helpful comment when, afaik, there is no documentation on how you're supposed to test helpers.

I have to say, I'm not really loving Ember

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
Okay, the "ember generate" command is pretty useful for figuring out what ember expects your project structure to be. In this case ember generate helper hello generates this helper file:

JavaScript code:
import Ember from 'ember';

export function hello(input) {
  return input;
};

export default Ember.Handlebars.makeBoundHelper(hello);
Whereas our code only has export default Ember.Handlebars.makeBoundHelper(function(value) {, without ever exporting the bare function. :cripes:

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Mr Shiny Pants posted:

Can I use backbone for this? Can I have models that contain a collection of other models and still hook everything up with eventhandlers and the rerendering logic?

I haven't done anything with Backbone for a couple of years, but back then, Backbone didn't have native support for nested models. I don't know if that has changed. There were extensions that added that, but I haven't used them.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Mr Shiny Pants posted:

So in trying to learn Ember I've decided to do their ToDo MVC tutorial.

Half way in the stuff breaks with the following error:

code:

Error while processing route: todos Cannot read property 'fixturesForType' of undefined TypeError: Cannot read property 'fixturesForType' of undefined

Nice, and I was really looking forward to completing the tutorial. I don't even know where to start in fixing this. :(

Edit: Seems like a new version of Ember data fixes it...... nice!

Welcome to Ember.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Mr Shiny Pants posted:

It gets better doesn't it? please say yes ;)

My experience says no, but maybe you "get" the framework better than I do.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Ember posted:

Unconsumed Computed Properties Do Not Trigger Observers

If you never get a computed property, its observers will not fire even if its dependent keys change

So now our code has a bunch of this.get('someComputedProperty') in the initializer of many classes just to make observers work.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

The Wizard of Poz posted:

It seems like the APIs for these libraries are changing on a weekly basis so Stack Overflow answers are rarely helpful. Ditto for Google results. I just want to know if I'm the only one who really struggles with this or not?

Nope. There is a reason YOSPOS likes the term web "developers".

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
"You tried your best and you failed miserably. The lesson is never try."

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope
You know, I think I really like ES6 modules.

Also once in a while I find a page like this http://www.poeticsystems.com/blog/ember-checkboxes-and-you and think that Ember is kind of cool sometimes.

Adbot
ADBOT LOVES YOU

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Kobayashi posted:

I don't know how you people do this professionally.

An ec2 micro instance has barely enough memory (1GB) to run "npm install ember-cli"
I had some services running in the background and it failed ("Killed" was the extent of the error message). I stopped the services (which used maybe 100-200 MB of memory) and npm was able to finish after a long-rear end time.

There was some jobs=1 configuration option I put somewhere because some guy on the internet recommended it, but this being javascript development, I sure as hell couldn't find any documentation for it.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply