JavaScript data binding...

[Maximilian]

So ive come to the conclusion that shoehorning react or angular into my current project is just not going to work. I realistically need to start a new project and use one of these from the beginning.

Anyways is there a better way of doing data binding than what im currently doing?

This is how its setup:

http://imgur.com/a/ZaoiM

Each food item has a remove button. When it is clicked a jQuery event handler gets the id of the button, the buttons look like this:

<button type="button" class="btn btn-danger btn-md pull-right" id="136eatenfoodremove">Remove <span class="glyphicon glyphicon-remove"></span></button>

And the food with the corresponding number is then removed from the underlying array which stores all the eaten foods. Is there a better way? Some small js framework I can use? Im using handlbars.js for templating and I love it, something like that but with data binding as well would be cool.


SEMI RELATED:
I say the food is removed from the underlying array, its actually not. What happens is:

1. remove clicked
2. request sent to server to remove food from database table
3. food removed from database table
4. updated list of eaten foods sent back to client
5. updated eaten food list replaces clients current eaten food list
6. DOM is updated

That happens with every single removal/addition of a food. It occurred to me that the client could actually just update its own food list and sync up with the server say every 5-10 minutes. Would that be more efficient? What do other websites do?

 

[purbeast0]

My last project was using AngularJS and my current one is using Backbone. I feel like I've stepped back into the stoneage having to use Backbone now. It's like you have to reinvent the wheel compared to what you get out of the box with AngularJS.

I'm assuming in your instance, once you remove it from the array, you then have to re-render that portion of the element also.

With Angular, you have 2 way binding, so you don't have to deal with as much of this stuff. You would basically just have a handler on the button, and it would remove the item from the array in the handler (which would be on the $scope member) which in turn would be bound to the view, and the view would automatically update for you.

That is what I loved about Angular compared to Backbone. In Backbone I'm having to do exactly what you are doing, where you have to remove from the data structure then re-render. Sure it's not like it's THAT much harder, but when you come from something that automatically does all of that for you, it just feels so primitive.

On another note, the way you are doing things as far as your ordered list goes is not the optimistic way. What I mean by that is, since you're waiting for a server request, that means there is a delay in the UI where the user will have to wait with a spinner or something to see that they removed an item.

Ideally what you want is to do it this way instead, because it gives instant user feedback.

1. remove clicked.
2. removed from the UI.immediately and update DOM.
3. request made to server to remove from table.
4. response comes back
4a - if response is okay, then do nothing.
4b. - if response has an error, then have some sort of error notification or something pop up and revert DOM

This is just an all around better user experience. I mean let's be real, typically these error cases happen less than 1% of the time, so we should code for the successful path.

There are definitely instances when you want to block the UI though when making a request, but you want to try and minimize that if at all possible.

 

[Maximilian]

Thanks, kinda glad to know im not the only person in the world thats done data binding like that.

Ive found vuejs and apparently it can do data binding. Its just a single .js file thank god so it shouldn't be too difficult to fit into the existing setup.

Ill try and redo the way it updates to what you said after I get the data binding working in vuejs (assuming I get it working and it dosent all go belly up).