Develop Reference

handlebars +=,-= if condition met

I've been searching the net net for a while now trying to find a way to aggregate json array values with handlebars using +=, or -= if the condition is met. however i can't seem to find any guidelines on how to properly do so. can anyone guide me on how to convert this iteration into a handlebars helper?
var table = $("#table tbody");
$.getJSON("front-end/ajax/bethistory.php", function(data) {
var value = 0;
$.each(data, function(a, b) {
if (b.action == "win") {
value += parseFloat(b.coins);
} else if (b.action == "lose") {
value -= parseFloat(b.coins);
}
var tbody = $("<tr/>").append($("<td/>").html(b.action), $("<td/>").html(value))
table.append(tbody);
});
});
something like this?
var value = 0;
Handlebars.registerHelper("this_val", function(a,b) {
if (a == "win") {
value += parseFloat(b);
} else if (a == "lose") {
value -= parseFloat(b);
}
return value;
});

for anyone who needs this. i was able to figure it out thanks to this post
Handlebars.registerHelper("compute", function(array, options) {
var new_array = "",
value = 0,
count = array.length;
for (var i = 0; i < array.length; i++) {
var coins = Number(array[i]['coins']),
action = array[i]['action'];
if (action == "win") {
if (coins > 0) {
value += coins;
}
} else if (action == "lose") {
if (coins > 0) {
value -= coins;
}
}
array[i]['running'] = value;
new_array += options.fn(array[i]);
}
return new_array;
});

JavaScript iterate through items backwards

I am iterating through some photos using this code:
if (this.lightboxIndex < this.photos.length - 1) {
this.lightboxIndex++;
} else {
this.lightboxIndex = 0;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;
},
How can i iterate backwards through the same photos? Is this along the lines of what I need to do?
if(this.lightboxIndex < this.photos.length - 1){
this.lightboxIndex--;
} else {
this.lightboxIndex = 0;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;
},

When you're iterating down, you need to check for reaching 0, not the highest index, and then go back to the highest index.
if (this.lightboxIndex == 0) {
this.lightboxIndex = this.photos.length - 1;
} else {
this.lightboxIndex--;
}
Your if test will always succeed, so it will just keep decrementing the index, going into negative numbers.

if(this.lightboxIndex > 0) {
this.lightboxIndex--;
} else {
this.lightboxIndex = this.photos.length - 1;
}
this.lightboxSrc = this.photos[this.lightboxIndex].src;

Why not use a decrementing for loop?
for (this.lightboxIndex = (this.photos.length - 1); this.lightboxIndex >= 0; this.lightboxIndex--) {
this.lightboxSrc = this.photos[this.lightboxIndex].src;
}

let think backward will go from last to first ,so if it is first index,assign to last index else decrease to first index !
forward will go from first to last ,so if it is last index , assign back to first index else increase to last index !
this.lightboxIndex = 0;
this.photos = ['a','b','c'];
function forward(){
if (this.lightboxIndex == this.photos.length -1) {
this.lightboxIndex = 0;
} else {
this.lightboxIndex++;
}
this.lightboxSrc = this.photos[this.lightboxIndex];
console.log(this.lightboxSrc);
}
function backward () {
if(this.lightboxIndex == 0) {
this.lightboxIndex = this.photos.length -1;
}
else {
this.lightboxIndex--;
}
this.lightboxSrc = this.photos[this.lightboxIndex];
console.log(this.lightboxSrc);
}
forward();
forward();
forward();
backward();
backward();
backward();

why two $scopes updates at the same time, duplicate data

I have this piece of code
$scope.addToOrder = function(index) {
var tempItem = $scope.item;
if (tempItem[index].validate == true){
if (_.isEmpty($scope.item2) == true) {
$scope.item2.push(tempItem[index]);
} else {
for (var i = 0; i < $scope.item2.length; i++) {
if ($scope.item2[i] == tempItem[index]) {
break;
}
if (i == $scope.item2.length - 1) {
$scope.item2.push(tempItem[index]);
}
}
}
}
}
I want to push data from one object to other (item to item2), it works well, but when i change data from item also item2 updates i dont want this.
What i missing?

As is, you are using an object reference. Then if modify one, the othes one is modified too.
You could use angular.copy
$scope.addToOrder = function(index) {
var tempItem = $scope.item;
var itemCopy = angular.copy(tempItem[index]);
if (tempItem[index].validate == true){
if (_.isEmpty($scope.item2) == true) {
$scope.item2.push(itemCopy);
} else {
for (var i = 0; i < $scope.item2.length; i++) {
if ($scope.item2[i] == tempItem[index]) {
break;
}
if (i == $scope.item2.length - 1) {
$scope.item2.push(itemCopy);
}
}
}
}
}

use angular.copy to cope by value
angular.copy($scope.item1, $scope.item2);
or
$scope.item1 = angular.copy($scope.item2);

Shortening if, else if, else if ... else using loops

I have the following lines of code:
$(function(){
$("div").scroll(function() {
function hpos(id) {
var pos = $("#" + id).position();
return pos.top;
}
function final(id) {
$("#header").html($("#" + id).html()),
$("h1").css("visibility","visible"),
$("#" + id).css("visibility","hidden");
}
if (hpos(5) < 0) {
final(5);
}
else if (hpos(4) < 0) {
final(4);
}
else if (hpos(3) < 0) {
final(3);
}
else if (hpos(2) < 0) {
final(2);
}
else {
final(1);
}
});
});
Shouldn't I be able to shorten it by using a loop instead of the else if statements? I can't find a way to make the loops work with my position().

for (var i = 5; i > 0; i--){
if (hpos(i) < 0) {
final(i);
break;
}
}
would something like this work? Not tested by the way

This should be shorter:
$.each([5,4,3,2], function(i,v) {
if( hpos(v) < 0 ) {
final(v);
return false;
} else if( v === 2 ) {
final(1);
}
});

An easier way to do lots of else if statements is to use the case method.

In case you need a while version:
:)
var elemId = 5;
while (elemId > 1) {
if (hpos(elemId) < 0) {
break;
}
elemId--;
}
final(elemId);

Checkboxes and trying to save the state of all checkboxes for the user when they return

function getFormState() {
var fields = document.getElementsByTagName('form')[0].elements;
if (fields.length === 0) {
return;
};
for (var i = 0; i <= fields.length - 1; i++) {
var name = fields[i].getAttribute('name');
if (document.getElementByTagName('name').checked === true) {
localStorage.setItem('name', "true");
} else {
localStorage.setItem('name', "false");
}
}
}
function fillFormState() {
var fields = document.getElementsByTagName('form')[0].elements;
if (fields.length === 0) {
return;
};
for (var i = 0; i <= fields.length - 1; i++) {
var name = fields[i].getAttribute('name');
getStatus = localStorage.getItem('name'); {
if (getStatus === "true") {
console.log("its checked");
document.getElementByTagName("name").setAttribute('checked', 'checked');
} else {
console.log("its not checked");
}
}
}
} // run the below functions when the web page is loadedwindow.onload = function () {
// check if HTML5 localStorage is supported by the browser
if ('localStorage' in window && window['localStorage'] !== null) {
// get the form state
getFormState();
// save the state of the form each X seconds (customizable)
setInterval('fillFormState()', 1 * 1000);
}
};
But it doesn't seem to work. And Im trying to figure out why. Im not very experienced with javascript so it might be quite obvious. Sorry for that. Im trying.

I'm guessing your localStorage is never being set because of this loop:
for (var i = 0; i <= fields.length - 1; i++) {
var name = fields[i].getAttribute('name');
if (document.getElementByTagName('name').checked === true) {
localStorage.setItem('name', "true");
} else {
localStorage.setItem('name', "false");
}
}
There is no document.getElementByTagName, and you are also searching for "name" instead of your variable name.
for (var i = 0; i <= fields.length - 1; i++) {
var name = fields[i].getAttribute('name');
if (fields[i].checked === true) { //Check the current field
localStorage.setItem(name, "true"); //Set the actual name, not "name"
} else {
localStorage.setItem(name, "false");
}
}