What I most often see Handlebars #each used for is displaying data from some structure in memory (like a list of names for instance).
I'm not doing that in this case. I've got a case in my app (backbone marionette) where I'm looping through a directory of images and displaying. The only data I have is the total image count. Smells like a pure for loop.
The images in the directory are always named with numbers, like:
1.jpg
2.jpg
3.jpg
and so on...
A for loop index, therefore, would indicate image file name.
So my pseudo code at this juncture looks like:
For (int i=1 to the total image count) {
<img src="path_to_image_directory/" + i + ".jpg">
}
Some searching on "Handlebars for loop" turns up a prescription like this:
Iterating over basic “for” loop using Handlebars.js
So I've attempted to implement that prescription in my Marionette ItemView. I figure if I can get that particular prescription to compile and run, I'll edit it to my needs. But I get the error "You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined".
My ItemView code is below. I think I'm passing the result of a "for" templateHelper. Obviously I'm not. What do I have wrong here?
ItemView Code:
var ForLoopExampleItemView = Marionette.ItemView.extend({
tagName: "div",
template: Handlebars.compile(
'{{#for 0 10 2}}' +
'<span>{{this}}</span>' +
'{{/for}}'
),
templateHelpers: function(){
return {
for: function (from, to, incr, block) {
var accum = '';
for (var i = from; i < to; i += incr)
accum += block.fn(i);
return accum;
}
}
}
});
Related
I have many class in my library almost 300, and I want to generate instance name by loop. In other words I wanna instead of this approach(witch has many code line):
X:This is my problem:
var cm1: Cm1 = new Cm1();
var cm2: Cm2 = new Cm2();
var cm3: Cm3 = new Cm3();
...
use like this approach (less than 10 code lines):
Y:I think this is solution:
for (var i: uint = 1; i < 4; i++)
{
var getChildByName("cm" + i): getChildByName("Cm" + i) = new getChildByName("Cm" + i);
}
but I know above code does not work, is there any way to make them !
-What am I actually trying to solve?
Make many variable by a few line code and save time and size app!
-Why do I have ~300 classes and why are you trying to create them in a loop at once?
This is about to data of request application!
-What do these classes do that you unconditionally need one of each all at the same time?
Because those data would show at first time!
First, it is better to store the classes in an Array or Object rather than an external variable for each item. if you want to access them by name, better to use object:
var classList:Object=new Object();
Then in your loop:
for(var i:uint=1;i<NumberOfClasses;i++){
classList["cm"+i.toString()]=new (getDefinitionByName("Cm"+i.toString()) as Class)();
}
getDefinitionByName is used to make Constructors using String;
Note: if your classes contain a package directory, you should include it. for example:
getDefinitionByName("myclasses.cm.Cm123")();
Then you can access them using Bracket syntax:
classList["cm123"].prop=val;
And don't forget to:
import flash.utils.getDefinitionByName;
I Hope it will help.
EDIT
to use Array instead of object, the loop should be:
for(var i:uint=1;i<NumberOfClasses;i++){
classList[i]=new (getDefinitionByName("Cm"+i.toString()) as Class)();
}
then to access them:
addChild(classList[0]);//0 or any other index;
Main idea:
I want to combine bootstrap grid system with angular ng-repeat
Method:
I used filter to reformat the json data (an array with a lot of objects), like the codepen project:
http://codepen.io/maggiben/pen/sfCnq
```
filter('listToMatrix', function() {
return function listToMatrix(list, elementsPerSubArray) {
var matrix = [], i, k;
console.log("hellowrld")
for (i = 0, k = -1; i < list.length; i++) {
if (i % elementsPerSubArray === 0) {
k++;
matrix[k] = [];
}
matrix[k].push(list[i]);
}
return matrix;
};
});
And here is my jade page code:
My controller code: To get the news.
The problem is I got much more items on the page:
This error means angular doesn't manage to finish a digest cycle. The reason for it comes from your filter: every time angular applies the filter to your list, a new matrix is created, so angular will keep invoking the filter until what it returns is the same as the previous iteration (which never happens).
To fix it, you could either track the items of your matrix using ng-repeat ... track by items.someProperty, so after two consecutives calls to your filter, angular will detect that this someProperty has not changed and will finish the cycle.
Another way to fix it would be to cache the result of your filter for a given list, so the next time angular invoyes your filter with the same list, you would return a pointer to the same matrix.
For more lecture you can refer to this question (same problem): Angular filter works but causes "10 $digest iterations reached"
I know there are quite similar questions here, but I haven't found the proper details. What would be helpful is definitely an explanation of the problems, and perhaps a base example, that anyone who searches later may be able to apply. (Not asking that you write it for me, I just find the examples helpful) I don't want to upset anyone and am kind of worried to post in a forum...
I am wondering alternatives to creating a screen based off tiles created from an array. I have been having an issue myself trying to access the movieclips that have been placed on screen, and trying to trace to find a way to reference them hasn't been working.
Anyway, take something basic like an array, and connecting it to movieclips, then how to access the movieclip itself once done. So I have been working on this, and used many different online resources, so I'm sure a lot of this is going to look familiar, just in a much messier way.
This takes the array to make the movieclips appear (Im sure at least one part in here is unnecessary, and I'm thinking I'm doing something wrong here that makes it not work out later) So this works, but feels pretty bulky.
Both are from the same main class file.
function makeWorld (anyMap, tileW, tileH) {
var worldWidth = anyMap[0].length;
var worldHeight = anyMap.length;
var MAP = this.addChild(new mapHolder());
function tiler(MAP, i, j, tileW, tileH, tile)
{
MAP.addChild(tile);
tile.x = (j * tileW);
tile.y = (i * tileH);
}
for (var i = 0; i < worldWidth; ++i) {
for (var j = 0; j < worldHeight; ++j) {
var curTile:int = anyMap[i][j];
if (curTile == 101) {
var tile1 = new tileGround();
tiler (MAP, i, j, tileW, tileH, tile1);
...
else {
var tile3 = new empty();
tiler (MAP, i, j, tileW, tileH, tile3);
}
}}}
Then there is attempting to reference it, where I'm having the issue. I don't know what to call this.MAP.tileGround by, and I have tried many things. I've read it's not such a good idea to reference by name when not very advanced so I wanted to avoid that sort of thing too.
addEventListener (Event.ENTER_FRAME, hits);
function hits (event:Event) {
var tileCatchG:MovieClip = this.MAP.tileGround;
if(tileCatchG.hitTestPoint(this.MAP.Char.x + leftBumpPoint.x, this.MAP.Char.y + leftBumpPoint.y, true)){
leftBumping = true;
} else {
leftBumping = false;
}
...
}
Thank you!
In looking over what you're doing a second time it would appear that you should have a reference to the 2-indexed array that represents the map.
You can create a regular (single indexed) Array at the top of the file like
public var tileArray:Array = [];
Then where you create them push them into the array
var tile1 = new tileGround();
tileArray.push(tile1);
then to reference them all you can just run a simple loop
for each(var tile:MovieClip in tileArray)
{
//Do stuff
if(tile instanceof tileGround)
{
//Do stuff specific to tileGround
}
}
I have a few different question and i have decided to put them in one. So the first question : If i have one and the same code(for example):
buttonsA.buton1a.addEventListener(MouseEvent.MOUSE_DOWN , buton1a_function);
buttonsA.buton2a.addEventListener(MouseEvent.MOUSE_DOWN , buton2a_function);
buttonsA.buton3a.addEventListener(MouseEvent.MOUSE_DOWN , buton3a_function);
buttonsA.buton4a.addEventListener(MouseEvent.MOUSE_DOWN , buton4a_function);
buttonsA.buton5a.addEventListener(MouseEvent.MOUSE_DOWN , buton5a_function);
buttonsA.buton6a.addEventListener(MouseEvent.MOUSE_DOWN , buton6a_function);
buttonsA.buton7a.addEventListener(MouseEvent.MOUSE_DOWN , buton7a_function);
buttonsA.buton8a.addEventListener(MouseEvent.MOUSE_DOWN , buton8a_function);
buttonsA.buton9a.addEventListener(MouseEvent.MOUSE_DOWN , buton9a_function);
buttonsA.buton10a.addEventListener(MouseEvent.MOUSE_DOWN , buton10a_function);
and i want to put it in several places(in different conditions) can i put them in a function a call a function instead a copying a large amout of text (I thought about 'include' from a different file but i want to keep all the information in one file).
The second question is about arrays : In my situation i have an array and i .push() a different numbers in it.But it could be "1,51,11,2,13' or "1,2,3,4,5" so every time place of numbers (and numbers themselves) are different. How can i say to AS3 in function to remove(.splice) exactly the number 5 or 6 (in spite of their place in the array).
The third question is again about the "code" that is upper in the question. Can i maybe with the loop for to make all these 10 addEventListen with a fewer code (i think it should be something like that:)
for(var i:int = 1; i <= 100; i++){
//buttonsA.buton'i'a.addEventListener(MouseEvent.MOUSE_DOWN , buton'i'a_function);
}
Long story short maybe i didn't have to put so much question and maybe my thoughts are not correct, but i think that my questions are easy but i can't solve them. Any decisions and replies are welcomed :) Thanks.
First Question:
Not sure I understand your first question. I'll take a stab at it and say you're wanting the functionality of the button mouse down to be enabled during different contexts of your application state, but you don't want to repeat all the event listeners all the time?
if so, you should make a subclass for all your button to inherit from. It could look something like this:
public class ButtonSubClass extends Sprite { //or simple button, or whatever
public function ButtonSubClass():void {
this.addEventListener(MouseEvent.MOUSE_DOWN,downHandler,false,0,true);
}
private function downHandler(e:MouseEvent):void {
//do something common to all your buttons here
}
}
Then, have all your buttons inherit from this class.
Second Question:
function removeFromArray(elementVal:*):void {
var index:int = array.indexOf(elementVal); //get the index of the first element whose value is the passed parameter;
if(index >= 0){
array.splice(index,1); //remove that element/index from the array.
}
}
Third Question:
If ButtonA is a sprite whose only children are all the buttons you want the listener for, then you can do this:
var i:int = buttonA.numChildren;
while(i--){
buttonsA.getChildAt(i).addEventListener(MouseEvent.MOUSE_DOWN , button_function);
}
function button_function(e:Event):void {
switch(e.currentTarget){
case button1a:
//do something with button 1a
break;
case button2a
//do something with button 2a
break;
}
}
OR, more sloppily and less efficient and not recommended, this:
for(var i:int=1;i<=10;i++){
this["buton" + i.toString() + "a"].addEventListener(MouseEvent.MOUSE_DOWN, this["buton" + i.toString() + "a_function"]);
}
I have the current JSON file:
[{"id":"1","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]},
[{"id":"2","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]}
How do I select the array with ID 1 and list every 'img_id' inside it, without repeating it for the other array?
edit 1:
I am trying to parse it like this but this code is erroneous:
$("#button").click(function() {
$.getJSON("../path/to/json", function(data) {
$.each(data[0].images.img_id, function(i,data){
var new_data ="<p src='path/to/folder/"+images.img_id+"'></p>";
$(new_data).appendTo("#htmlTag");
});
}); return false;
});
Much appreciated.
You have an array of objects, where each object contains another array of objects. I'm assuming the JSON structure you are using is:
var a = [{"id":"1","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]},
{"id":"2","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]}];
I'm also assuming you are using JavaScript.
PostEdit:
Your code is fairly close, I believe what I have below should work:
$("#button").click(function() {
$.getJSON("../path/to/json", function(data) {
$.each(data[0].images, function(i,data){
var new_data ="<p src='path/to/folder/" + data.img_id + "'></p>";
$(new_data).appendTo("#htmlTag");
});
});
return false;
});
All I did was change the first parameter to your each call from: data[0].images.img_id to: data[0].images. Also, I changed the declaration of new_data from:
var new_data ="<p src='path/to/folder/"+images.img_id+"'></p>";
to:
var new_data ="<p src='path/to/folder/"+data.img_id+"'></p>";
Note that the parameter "data" in the each callback function is simply the element in the array, while "i" is the index of that element in the array. Therefore, data is an object which looks like this:
{"img_id":1}
So, you can get the ID via data.img_id. Hope this helps.
I think you're talking about references. I don't think they are possible in JSON. In case you strictly need them and still want the readable serialization of your objects - I'd suggest you to look into YAML
I think there is a typo in your JSON...it seems like a bracket is missing at the end, and one has been added at the start of line 2. But, assuming you meant this (and are using Javascript):
var myJson = [{"id":"1","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]},
{"id":"2","images":[{"img_id":"1"},{"img_id":"2"},{"img_id":"3"}]}];
then you can access whatever you need just like a nested Javascript object. If you wanted to only access the object with ID equal to 1, and order is not guaranteed, you would have to iterate:
for(var i = 0; i < myJson.length; i++){
if(myJson[i].id === "1"){
var imgs = myJson[i].images;
for(var j = 0; j < imgs.length; j++){
//do what you want with imgs[j].img_id
}
}
}