Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

Jimlit: Jun 30, 2005

Thermopyle posted:

Is there anything that Angular is better at?

Maluco Marinero posted:

Rapid development for people who want to stick to a more conventional model/controller/view-template approach for their application, and want that structure enforced by the entire framework.

This.

Also the demand for knowledge of Angular is pretty high. I'm currently in the middle of a job search and i'm seeing Angular dropped a ton in job listings.

# ? Mar 10, 2015 19:12

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 03:15

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

Jimlit posted:

This.

Also the demand for knowledge of Angular is pretty high. I'm currently in the middle of a job search and i'm seeing Angular dropped a ton in job listings.

It's really popular for internal line-of-business apps for some reason, and Angular 1.x will probably earn a reputation as frontend ColdFusion in the coming years.

# ? Mar 10, 2015 20:46

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

If you are going to do Angular, you really have to do it properly (IE, the way Angular wants you to do it). If you don't, you are just going to make life hard for yourself and anyone who has to pick up your project. I'm in the middle of re factoring a large Angular app where the original developer put ALL the logic into Model like classes, up to and including injecting $scope directly into Models. Models that are shared, and cached, and that can trigger $digests whenever they feel like. The new stuff has been a breeze, and once this re factoring is done, I'm expecting things will go smoothly there too.

A good book on the subject is NG-Book by Ari Lerner. It has actually useful examples, instead of the terrible ones provided in the official documentation and on most blog posts.

# ? Mar 10, 2015 20:48

more like dICK: Feb 15, 2010; This is inevitable.

The Wizard of Poz posted:

Nope, the PLAN is to have no migration path. The changes are too dramatic and fundamental apparently for a migration path to be feasible.

This is specifically not true anymore. The last presentations from the Angular 2.0 team have indicated that there will be a migration path involving incremental changes to move a 1.x app to 2.x. No more upfront total rewrite.

As for why someone would continue to use it, well it still works. Why waste time with the ridiculous webdev churn.

# ? Mar 10, 2015 21:06

Skiant: Mar 10, 2013

quote:

We�ll continue building releases in the Angular 1 branch until the vast majority of folks have moved to Angular 2. We want the burden to be on the Angular team to make Angular 2 simple to learn, attractive in its features, and an easy target to migrate to from Angular 1.

Taken straight from the official announcement after NG-Conf.

# ? Mar 11, 2015 10:06

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

AKA, the Python 2 to Python 3 model.

# ? Mar 11, 2015 23:45

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; 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.

# ? Mar 15, 2015 21:33

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

So, I've only been doing JS work for a year now and I've always used Facebook's Jest for unit testing.

I love the auto-mocking it does, but the test framework is so slow (a problem acknowledged by the devs, so it's not just me writing bad tests) and I'm getting pretty sick of it.

What are some other good testing tools? Specifically, I'm looking for the easiest way of mocking required modules.

# ? Mar 16, 2015 18:45

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

How slow, does it work okay on a single file, or is it when watching a big project? Personally I eschew the lot when I'm using mocha/jasmine, I test a single file using a keybinding in Vim (or insert IDE of choice) and then from now on testing is bound to that file (based on convention right now, Test, Spec in the name).

From then on I just hit that keybinding to run the test wherever I am. Single file tests rarely slow me down appreciably and its nice to know my test files are all genuinely units only requiring themselves to be run directly.

That said, that may not actually address your problem, but I avoid using test watchers because they don't scale particularly well, that said it does require a little more thought,and of course there is a 'run all' file for CI.

# ? Mar 16, 2015 19:40

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Maluco Marinero posted:

How slow, does it work okay on a single file, or is it when watching a big project?

I basically hit every problem mentioned in this issue. It's not uncommon for the tests for a single file with maybe only a dozen it calls to take 3 seconds, plus the 3 seconds jest takes to "start up" every time. These are simple tests without a lot of setup or anything.

Maluco Marinero posted:

Personally I eschew the lot when I'm using mocha/jasmine, I test a single file using a keybinding in Vim (or insert IDE of choice) and then from now on testing is bound to that file (based on convention right now, Test, Spec in the name).

From then on I just hit that keybinding to run the test wherever I am. Single file tests rarely slow me down appreciably and its nice to know my test files are all genuinely units only requiring themselves to be run directly.

That said, that may not actually address your problem, but I avoid using test watchers because they don't scale particularly well, that said it does require a little more thought,and of course there is a 'run all' file for CI.

I run my tests for a single file 10 or 20 times as often as my tests for everything...in fact they run for the current file every time I save. But, I still run all my tests pretty often. Like maybe a dozen times a day or something.

It's not a huge deal, but its a pain point that I get irritated at every day.

# ? Mar 16, 2015 20:12

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Do you think automated mocking comes at too high a cost? I can't imagine it automates returns correctly though, so I imagine you still have to do manual mocking and stubs for unit testing actual back & forth interaction.

# ? Mar 16, 2015 20:31

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Maluco Marinero posted:

Do you think automated mocking comes at too high a cost? I can't imagine it automates returns correctly though, so I imagine you still have to do manual mocking and stubs for unit testing actual back & forth interaction.

I haven't decided. I mean, while I'm writing the tests I love the automatic mocking. When I'm running them, not so much.

You're right that you have to stub out returns correctly, but that's simple and a decent amount of the time I don't need to anyway.

However, like I said earlier I haven't really done JS testing with anything but jest, so I just don't have a point of reference.

Since I posted earlier I've been messing with mocha + proxyquire (since I'm using browserify) + sinon and I still haven't figured out how to mock jquery so my module under test doesn't actually try to fire off an ajax request.

Before I go too far down this rabbit hole I guess I'm going to look in to karma.

# ? Mar 16, 2015 20:42

spacebard: Jan 1, 2007; Football~

Thermopyle posted:

I haven't decided. I mean, while I'm writing the tests I love the automatic mocking. When I'm running them, not so much.

You're right that you have to stub out returns correctly, but that's simple and a decent amount of the time I don't need to anyway.

However, like I said earlier I haven't really done JS testing with anything but jest, so I just don't have a point of reference.

Since I posted earlier I've been messing with mocha + proxyquire (since I'm using browserify) + sinon and I still haven't figured out how to mock jquery so my module under test doesn't actually try to fire off an ajax request.

Before I go too far down this rabbit hole I guess I'm going to look in to karma.

I wrestled with sinon and the utter lack of documentation around it for a while before ending up using mockjax. But it feels really dirty to use and only supports one mocked ajax response per unit test iirc. It wasn't slow by any means, but I imagine being used to automated mocking it would be a pain in the rear end to setup for a bunch of ajax requests.

# ? Mar 16, 2015 23:04

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Hmm. I've never had top much trouble with sinon for mocking, stubbing, etc.

http://sinonjs.org/docs/

Where do you find the docs lacking?

# ? Mar 16, 2015 23:38

spacebard: Jan 1, 2007; Football~

Maluco Marinero posted:

Hmm. I've never had top much trouble with sinon for mocking, stubbing, etc.

http://sinonjs.org/docs/

Where do you find the docs lacking?

No matter what I tried while following http://sinonjs.org/docs/#server, I never got fakeXHR to load / work. I don't remember the details, but I do remember searching around for any other instructions for using it, and everything I tried seemed like fakeXHR was never loaded properly into the sinon object. Admittedly JavaScript isn't my strength although I've improved over the last 2 years.

I may have been trying to just use sinon server with qunit running through grunt.

# ? Mar 17, 2015 00:04

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Maluco Marinero posted:

Hmm. I've never had top much trouble with sinon for mocking, stubbing, etc.

http://sinonjs.org/docs/

Where do you find the docs lacking?

In my case, I didn't have much trouble with sinon, exactly...

So, since I'm using CommonJS and browserify, my file under test starts out with...

JavaScript code:

// FileUnderTest.js
var $ = require('jquery')

In my mocha test suite I first did:

JavaScript code:

it('does a jquery.ajax thingy', function () {
  var $ajax = sinon.stub();
  var $stub = {ajax: $ajax};
  var FileUnderTest = proxyquire('../FileUnderTest', {'$': $stub});

  FileUnderTest.methodUnderTestThatCallsAjax();

  // then some assertions on $ajax
}

That doesn't work because jquery checks for window.document when it loads.

Ok, so I find mocha-jsdom which uses jsdom to provide a DOM. I implement that, but I get a jsdom error about requiring a 'context' argument. I find several references to people having this problem with jsdom, but no solutions.

Now, I've got to decide whether to continue trying to get a fake-browser-in-node-console solution going (which is what jest does), or switch over to using a browser-based tester...or just stick with jest.

If I go the browser route, then I've got to figure out how to browserify my tests since my project is built around browserify and CommonJS modules.

In conclusion, I'm just complaining because this is :effort:

# ? Mar 17, 2015 01:02

Stoph: Mar 19, 2006; Give a hug - save a life.

I feel the same way man, and it seems like you're trying out all the options that made me hate JavaScript testing. Perhaps you can set up a CI server to run CasperJS integration tests and let me know how you feel about those as well. I like integration tests because you don't have to convince any of the assholes you work with to write them - you can just have your robot ping them when they gently caress up the build.

# ? Mar 17, 2015 15:59

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

So I made a thing, it's pretty early days (only started it yesterday) but it's coming along pretty quickly so I wanted some feedback on the concept:

https://github.com/weareoffsider/react-jade-transformer

Impetus is the designer/dev that I work with, and I too, like working with Jade. We build lots of mixins, and build some really nice component driven sites, however this is basically React in a templating language when you think about it, just without the interactive bit. While there are other transformers out there, I wanted to make an implementation that was zero runtime, and it even plays nice with Coffeescript /Typescript/ES6 parsers if you split the parsing steps up like I've put in the docs.

The big idea we're toying with is building 100% of a site in React, so it gets rendered server side entirely, and then points where it makes sense to be interactive can easily upgraded to be interactive without any frankenstein process from Jade to React. One thing I'm not sure on is the syntax for calling it up, the rj`` backticks. It could really be anything, even customisable, so I guess it's no big deal.

Anyway, I like it because it lets you do some stuff inside a React Component call that you can't really do without nested ternarys and self called switches, and because I've built it on Esprima, the Jade Parser, and escodegen, I'm actually really confident about having a reasonably accurate parser/output right out of the gate. Almost no regex here (except for some loose bits of Jade's parse tree), just a tree conversion.

JavaScript code:

var TestComponent = React.createClass({
  exampleProps: {
    title: "The Title",
    subtitle: "The Subtitle"
  },
  render: function() {
    var inserted = rj`aside.component__aside`;
    var myClass = "component__extra";
    var things = ["one", "two", "three"];
    var someCase = "blue";

    return rj`
      div.component.component--modifier(class="component*")
        h3.component__title= this.props.title
        h4.component__subtitle= this.props.subtitle
        p(class=myClass)
        p Some hardcoded text.
        +SomeOtherComponent(variable=myClass)
          h3 blah blah blah
        = inserted

        case someCase
          when "blue"
            p.blue Blue
          when "red"
            p.red Red
          default
            p.empty Is Empty

        unless things.length < 5
          ul.component__things
            each thing, ix in things
              li.component_thing(key=ix)= thing
        else if things.length > 0
          p.component__warning= "You need more things! :("
        else
          p.component__warning= "You got no things! :("

    `;
  }
});

Well that's my story. welp

# ? Mar 18, 2015 22:02

TildeATH: Oct 21, 2010; by Lowtax

I'm finally putting together something with Flux following this example:

https://egghead.io/lessons/react-flux-components-views

But when I get to the point where my store is supposed to emit the change event:

code:

var AppStore = assign({}, AppDispatcher.prototype, {
	emitChange: function() {
		console.log(this);
		this.emit("change");
	},

I get a "undefined is not a function". I noticed the example uses slightly older syntax (I'm using object-assign instead of merge, for instance and the React .render instead of .renderObject or whatever it used to be) so I was wondering if .emit() was still the right function.

# ? Mar 19, 2015 18:30

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

TildeATH posted:

I'm finally putting together something with Flux following this example:

https://egghead.io/lessons/react-flux-components-views

But when I get to the point where my store is supposed to emit the change event:
code:
var AppStore = assign({}, AppDispatcher.prototype, {
	emitChange: function() {
		console.log(this);
		this.emit("change");
	},
I get a "undefined is not a function". I noticed the example uses slightly older syntax (I'm using object-assign instead of merge, for instance and the React .render instead of .renderObject or whatever it used to be) so I was wondering if .emit() was still the right function.

You're not using EventEmitter in that assign call. this.emit comes from EventEmitter.

# ? Mar 19, 2015 18:59

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

With regards to my whining about Jest earlier...

I refactored my tests to use mochify, sinon, babel, proxyquire, PhantomJS, and min-webdriver.

Sixty or so tests that took around 10 seconds with jest now run around 100 ms. It's more of a pain to manually mock stuff, but the speed gain makes up for it, and I actually like the explicit nature of doing my own mocks. I have to be more careful to make sure I'm mocking everything that should be mocked, though.

As a breakdown of what exactly is happening with all these stupid tools are doing:

Mochify is some glue that bundles my CommonJS-module-using code with browserify and runs the tests with mocha in PhantomJS or the browsers I choose.
Proxyquire lets me replace the modules my module-under-test uses with modules containing methods stubbed with sinon.
Babel transpiles my ES6-using code to ES5.
PhamtomJS provides the DOM and js engine to run my code under test.
min-webdriver runs my code under test in real browser when I want to.

I use all this by having the following in my package.json:

JavaScript code:

"scripts": {
    "start": "mochify --watch --transform [babelify --ignore node_modules] --plugin [proxyquire-universal] --recursive",
    "phantom": "mochify --transform [babelify --ignore node_modules] --plugin [proxyquire-universal] --recursive",
    "wd": "mochify --wd --transform [babelify --ignore node_modules] --plugin [proxyquire-universal] --recursive",
    "cover": "mochify --cover --transform [babelify --ignore node_modules] --plugin [proxyquire-universal] --recursive",
    "test": "npm run phantom && npm run wd && npm run cover"
  }

I mostly just type npm start which runs the tests on file changes. That will probably change when I get more tests that push up the run time. I'll also have to add a reactify transform for my JSX-using code when I get to them...

# ? Mar 19, 2015 19:18

TildeATH: Oct 21, 2010; by Lowtax

Thermopyle posted:

You're not using EventEmitter in that assign call. this.emit comes from EventEmitter.

Yep, I just copypasted and forgot to change AppDispatcher to EventEmitter. I guess that would do it.

# ? Mar 19, 2015 21:35

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

A super newb Angular question. Let's say I have a bunch of image paths and titles in a .json file. On the left of the webpage I have a list with the titles, and on the right I display the corresponding images. When a title is hovered over, I want the corresponding image to change/add a class (to change its styling in some way). What's the simplest way to accomplish this? This is just an example. I'm trying to grasp the basics of how Angular handles this sort of thing.

# ? Mar 25, 2015 02:57

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Well, to just basically display images based on the data in your .json file, you want ngSrc directive. It replaces the src attribute on a normal <img> tag. You need to use the ngSrc directive as browser will try to download the image from the src="" tag before Angular has a chance to insert the path from your json file.

code:

<div ng-repeat="i in items">
	{{i.title}}: <img ng-src="/images/{{i.path}}.jpg" />
</div>

Skandranon fucked around with this message at 04:39 on Mar 25, 2015

# ? Mar 25, 2015 04:29

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

Thanks, but not exactly what I'm thinking. I'm talking about a separate list of titles, and a separate list of images. When a title is hovered, the corresponding image on another part of the page is affected.

It may be easier to show an example. This is a site I made that does what I'm describing. Notice how hovering over one of the left-hand items causes the corresponding image to change. I did this with jQuery mostly. I'm just wondering if there's a simple way to do it with Angular.

# ? Mar 25, 2015 14:52

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

If they're all within the same controller scope, you could have:

code:


function($scope) {
    $scope.state = {activeImage: ""}
}

code:


<ul>
<li ng-repeat="item in items">
<a ng-mouseenter="state.activeImage = item.image">{{ item.name }}</a>
</li>
</ul>

<img ng-src="{{ state.activeImage }}"/>

Putting the state in as an object is a way to prevent you losing context within the repeat, which you may not have to do if things are close enough, but may need to do if there are other things that spawn scope in between.

This is pretty terse because I'm phone posting, but you could have mouseleave handling as well. A lot of simple interactions can be built using their event directives, but I can't say I'm a fan of building app this way these days.

# ? Mar 25, 2015 15:42

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

caiman posted:

Thanks, but not exactly what I'm thinking. I'm talking about a separate list of titles, and a separate list of images. When a title is hovered, the corresponding image on another part of the page is affected.

It may be easier to show an example. This is a site I made that does what I'm describing. Notice how hovering over one of the left-hand items causes the corresponding image to change. I did this with jQuery mostly. I'm just wondering if there's a simple way to do it with Angular.

There are many ways you can do it... you could have the onmouseover event of the left hand panel change a IsHovered boolean on your model, of which both the left hand panel and main panel ng-repeat over, but display different things. When the model changes from events on the left, it should update correspondingly to what is in your main panel. You'll have to make sure your IsHovered is only set once, so either mouseleave or a central HoveredItem variable instead. If you are looking for a 1-2 line fix, no I can't think of one, but you can do what you want in pure Angular if you want, without jQuery.

# ? Mar 26, 2015 00:42

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

Thanks guys. That should give me enough to go on for now.

# ? Mar 26, 2015 01:54

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Semi-relevant to is thread: React Native is public: http://facebook.github.io/react-native/

I for one, am giddy with excitement. :banjo:

# ? Mar 26, 2015 23:29

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Lumpy posted:

Semi-relevant to is thread: React Native is public: http://facebook.github.io/react-native/

I for one, am giddy with excitement.

I haven't been following this too closely. What's the word on Android?

# ? Mar 27, 2015 02:47

yolandi: Jul 3, 2014; To the

Hey any Knockout people around, I have two questions.

I have a form that has a select of options, but each option also has a user settable param. The form is controlling various options on how an image is rendered, so I want it to update as soon as an option is changed.

I kinda have it working, except when the user edits the param as text input, I dont seem to get any notifications. If they change some other param in the form, the updated param value is there, so its working in that respect.

The code for that part looks like this:

code:

//this object defines the setting name and its parameter
var Setting = function(name, param) {
        var self = this;
        self.name = ko.observable(name);
        self.param = ko.observable(param);

        self.dict = function() {
                return {'name': self.name(), 'param': self.param()};
        };
}

function ViewModel() {
        var self = this;
        self.set1 = ko.observable();
        self.settings = ko.observableArray([new Setting("None", ""), new Setting("Foo", 700), new Setting("Bar", 500)]);
}

<select data-bind="options: settings, optionsText : 'name', value: set1"></select>
<input type="text" data-bind="value : set1() ? set1().param : ''" />

What I would really like is to get an update when they edit the param text. If they do put something else in there, it does get updated under the hood, but no event triggers as the control loses focus or anything like that.

This may be related to the way I am doing things to get updates as soon as something changes.

In a nutshell I have a pureComputed control which touches all the items in the form, and once the page is loaded I subscribe to that. That way when anything in the form changes I get the subscription, which I jsonify and do some ajax stuff to update the image.

I am new to this so I have no idea if that's the right way to do it. I don't want users to have to click an "update" button or something like that.

This is the code for that

code:

function ViewModel() {
    ....
        self.imgControls = ko.pureComputed(function() {
                var y = [self.set1()];
        }).extend({ notify: 'always' });
}

<script type="text/javascript">
//at the bottom of the page
var vm = new ViewModel();
ko.applyBindings(vm, $('#edit')[0]);
vm.imgControls.subscribe(function(x) {
        var self = this;
        var y = { 'set1' : self.set1().dict()};
        // do some stuff with JSON.stringify(y)
}, vm);

</script>

Would be interested if theres any feedback on better ways to do this.

# ? Mar 27, 2015 03:51

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Thermopyle posted:

I haven't been following this too closely. What's the word on Android?

Not in this first public release, but from what I remember from reading all about it after ReactConf, Android will be a 1st class citizen as well.

# ? Mar 27, 2015 13:28

Kekekela: Oct 28, 2004

Lumpy posted:

I for one, am giddy with excitement.

Little late on the draw but I was just coming to post this. I am sharing in your giddiness, I've been waiting for this since I first saw Paper.

# ? Mar 27, 2015 18:43

MrMoo: Sep 14, 2000

Lumpy posted:

Semi-relevant to is thread: React Native is public: http://facebook.github.io/react-native/

I for one, am giddy with excitement.

Facebook also released a modified version of Atom.io supporting React and React Native, http://nuclide.io.

# ? Mar 27, 2015 21:27

PlaneGuy: Mar 28, 2001; g e r m a n
e n g i n e e r i n g; Yam Slacker

yolandi posted:

Hey any Knockout people around, I have two questions.
<some stuff>

Just to get it straight:
Set1 is the selected setting from settings?

I would try making it more "knockoutey" and have your input box binding look a little different. I'm not sure I trust having the conditional in the value like that. Maybe:

code:

<!-- ko with:set1 --><input data-bind="value:param, valueUpdate:'afterkeydown'" /> <!-- /ko -->

Change afterkeydown to input if it works in your target browser since it's more accessible, but you get the idea.

Stylistically, I have issues with the setup (why isn't the stuff in the subscription just in the VM?), but as long as it works for now.... Personally my VM would look like

code:

function imageVM(){
  var me = this;
  me.set1 = ko.observable();
  me.settings = ko.observableArray([  /* add your settings as before */ ]);
  me.imageSrc = ko.observable();

  me.settings().foreach(function(s){
    s.param.subscribe(function(newValue){ getImage() });
  }

  function getImage() {
    $.ajax({ /*whatever*/ })
    .then(function(result){ me.imageSrc(result); }, function(err){ alert('oh poo poo, dawg'); });
  }
}

I think that works since it's the changing of the setting param that triggers an update to the image, right? I dunno what the service returns, though so you'd have to account for that. I have mine set up for an URL being returned. I think you could return a data URL too? Then on the actual page you could bind

code:

<img data-bind="attr:{src:imageSrc}"/>

PlaneGuy fucked around with this message at 21:30 on Mar 29, 2015

# ? Mar 29, 2015 21:19

Kekekela: Oct 28, 2004

I'd just like to thank whoever it was that suggested webpack for working with react, much smoother than what I was doing.

# ? Mar 30, 2015 15:38

yolandi: Jul 3, 2014; To the

PlaneGuy posted:

Just to get it straight:
Set1 is the selected setting from settings?

I would try making it more "knockoutey" and have your input box binding look a little different. I'm not sure I trust having the conditional in the value like that. Maybe:
code:
<input data-bind="value:param, valueUpdate:'afterkeydown'" /> 
Change afterkeydown to input if it works in your target browser since it's more accessible, but you get the idea.

Stylistically, I have issues with the setup (why isn't the stuff in the subscription just in the VM?), but as long as it works for now.... Personally my VM would look like
code:
function imageVM(){
  var me = this;
  me.set1 = ko.observable();
  me.settings = ko.observableArray([  /* add your settings as before */ ]);
  me.imageSrc = ko.observable();

  me.settings().foreach(function(s){
    s.param.subscribe(function(newValue){ getImage() });
  }

  function getImage() {
    $.ajax({ /*whatever*/ })
    .then(function(result){ me.imageSrc(result); }, function(err){ alert('oh poo poo, dawg'); });
  }
}
I think that works since it's the changing of the setting param that triggers an update to the image, right? I dunno what the service returns, though so you'd have to account for that. I have mine set up for an URL being returned. I think you could return a data URL too? Then on the actual page you could bind
code:
<img data-bind="attr:{src:imageSrc}"/>

Just wanted to say thanks, it cleared up a few things for me. I ditched the computed one cause it was a dumb idea, and just subscribe directly to each member once the page is loaded. Subscribing to each element in the array also fixed why i wasnt getting updates, so I dont need to use afterKeyDown which I was hoping to avoid.

I didnt even think of binding the img, its a good idea but theres a bunch of other stuff going on so I passed on that for now. I went with knockout as I wanted something fairly unobtrusive that I could use with all the existing stuff, and its working pretty nicely now, thanks!

# ? Apr 1, 2015 06:58

geetee: Feb 2, 2004; >;[

Webpack is awesome, but I want to blow my brains out because my coworker is a neanderthal. He's making GBS threads all over my parade because he's content with the JavaScript he wrote 15 years ago. For context, this guy still runs Windows XP by choice (and considers it the gold standard), and rather than create a git branch, he'll just copy the directory.

# ? Apr 1, 2015 17:38

Stoph: Mar 19, 2006; Give a hug - save a life.

geetee posted:

Webpack is awesome, but I want to blow my brains out because my coworker is a neanderthal. He's making GBS threads all over my parade because he's content with the JavaScript he wrote 15 years ago. For context, this guy still runs Windows XP by choice (and considers it the gold standard), and rather than create a git branch, he'll just copy the directory.

This is stuff the CTO/VP Engineering/Lead Developer should be enforcing... If your coworker is a neanderthal, then leave him be or convince your company to put the processes in place fix it.

# ? Apr 1, 2015 18:34

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 03:15

geetee: Feb 2, 2004; >;[

Stoph posted:

This is stuff the CTO/VP Engineering/Lead Developer should be enforcing... If your coworker is a neanderthal, then leave him be or convince your company to put the processes in place fix it.

It's a work in progress. This guy would rather write everything in C++. If you wanted a website, he'd prescribe burning it all down and rewriting everything from the OS up. I'm not even exaggerating.

# ? Apr 1, 2015 21:37

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »