We Keep Coding

How to write a jQuery style ng-repeat

Im used to using AngularJS for data binding and displaying data to the front end via its directives.
Essentially i have written a jQuery fucntion to get some data from a .JSON file:
$(document).ready(function() {
var myItems;
$.getJSON("../assets/data/address.json", function(data) {
myItems = data.Addresses.AddressList;
console.log(myItems);
});
});
How can i repeat all of the items in myItems in an <li>
In angular terms, it would look like:
<ul>
<li ng-repeat="address in myItems">
{{ address.HouseNumber }}, {{ address.Street }}, {{ address.Postcode }}
</li>
</ul>
How can i get this to work without needing to use Angular?

Html:
<ul id="example">
</ul>
Script:
$(document).ready(function() {
var myItems;
$.getJSON("../assets/data/address.json", function(data) {
myItems = data.Addresses.AddressList;
$.each( myItems , function( index, address){
$('#example').append('<li>'+ address.HouseNumber+', etc..' + '</li>');
});
});
});

I usually use underscore template for similar things. http://underscorejs.org/#template

Have a look at the some javascript templating languages, like jTemplates or JsRender.

You code would be look like below
$(document).ready(function() {
var myItems;
$.getJSON("../assets/data/address.json", function(data) {
myItems = data.Addresses.AddressList;
var ulElement = $('<ul></ul>')
$.each(myItems, function(index, value) {
$('<li></li>').appendTo(ulElement).text(value.HouseNumber + ' '+ value.Street + ' ' + value.Postcode);
})
$('#mainDiv').append(ulElement);
});
});

How to add a break between Array objects with knockout and tooltip

I have an array joined with commas in a tooltip. However I want each one be on it's own line. I've tried a few things but none seem to be working. The code is a knockout observable to which I am new too.
Here is my ko observable:
this.campaignTagString = ko.observable("");
(function() {
if(data.campaignTags != undefined) {
var array = [];
for(var tag in data.campaignTags){
array.push(data.campaignTags[tag].name);
}
//Join our campaign tag name array
var tagString = array.join(", " + '<br />');
$('#tooltip-campaigntags').tooltip({
content: function(callback) {
callback($(this).prop('title').replace('|', '<br />'));
}
});
var textCampaign = "Campaigns: ";
o.campaignTagString(textCampaign + tagString);
}
})();
I am calling it like so:
<span id="tooltip-campaigntags" class="label label-default label-mini" data-bind="html: '<i class=\'fa fa-tags\'></i> '+campaignTags().length, tooltip: { title: campaignTagString , placement: 'bottom' }" data-toggle="tooltip" data-placement="bottom" title="" >
</span>
Any help would be great, thanks!

Some tips:
You have an error in your code: if campaignTags is an object, campaignTags().length will not work; if it is an array, data.campaignTags[tag].name will not work.
You might find it useful to have a look at Knockout-Bootstrap, a Bootstrap adaptation that provides Knockout bindingHandlers for Bootstrap JS functions (used in demo below).
The Bootstrap documentation mentions the option {html: true} if you want your content not to be encoded into text.
Additionally, your IIFE (the function in which you wrapped the bootstrap tooltip functionality) should rather be a computed observable on your view model, as well as the icon html, and the string, all depending on campaignTags.
Below are the resulting JS viewModel and HTML binding if you follow these tips:
//params === object containing tag objects like -- tagX: {name: 'tag'}
function VM(params) {
var self = this;
this.campaignTags = params;
this.campaignTagsArray = ko.computed(function() {
var array = [];
for(var tag in self.campaignTags) {
array.push(self.campaignTags[tag].name);}
return array;});
this.campaignTagString = ko.computed(function() {
return "Campaigns: <br>" +
self.campaignTagsArray().join(", " + '<br />'); });
this.html = ko.computed(function() {
return '<i class="fa fa-tags"></i> ' +
self.campaignTagsArray().length });
}
And the HTML binding:
<span class="label label-default label-mini" data-bind="
html: html(),
tooltip: { html: true, title: campaignTagString() , placement: 'bottom'}">
</span>
Check out the fiddle for a demo.

separating javascript and html for readable code

sometimes my javascript code is mixing with html and css. in this stuation, my code is beind unreadable. How do you separate the javascript and html side in javascript?
For example: (using javascript dojo toolkit)
addLayer: function (layer, index) {
var layerClass = layer.visible === true ? 'layer checked' : 'layer';
var html = '';
html += '<li class="' + layersClass + '">';
html += '<div class="cover"></div>';
html += '<span tabindex="0" class="info" title="MyTitle"></span>';
html += '<span tabindex="0" class="toggle box"></span>';
html += '<div class="clear"></div>';
html += '</li>';
var node = dom.byId('layersList');
if (node) {
domConstruct.place(html, node, "first");
HorizontalSlider({
name: "slider",
value: parseFloat(layer.opacity),
minimum: 0,
maximum: 1,
showButtons: false,
discreteValues: 20,
intermediateChanges: true,
style: "width:100px; display:inline-block; *display:inline; vertical-align:middle;",
onChange: function (value) {
layer.setOpacity(value);
}
}, "layerSlider" + index);
if (!this.layerInfoShowClickHandler) {
this.layerInfoShowClickHandler = on(query(".listMenu"), ".cBinfo:click, .cBinfo:keyup", this._onLayerInfoShowIconClicked);
}
}
}
In this stuation, my code is adding html to view side dynamically. Adding event handlers to created html code. Adding additional tools(HorizantalSlider) same time.
This workflow is binded one to another. This code is unreadable. Is there a way to solve this with clean code?

This answer uses Dojo to split your HTML + CSS from JavaScript.
HTML template
The recommended approach is by defining your HTML template in a seperate HTML file. For example:
<li class="{layersClass}">
<div class="cover"></div>
<span tabindex="0" class="info" title="MyTitle"></span>
<span tabindex="0" class="toggle box"></span>
<div class="clear"></div>
</li>
Also notice the replacement of layersClass by a placeholder.
Load the HTML template
Now, to load the template you use the dojo/text plugin. With this plugin you can load external templates, for example by using:
require(["dojo/text!./myTemplate.html"], function(template) {
// The "template" variable contains your HTML template
});
Converting the placeholders
To replace {layersClass}, you can use the replace() function of the dojo/_base/lang module. Your code would eventually look like:
require(["dojo/text!./myTemplate.html", "dojo/_base/lang"], function(myTemplate, lang) {
var html = lang.replace(myTemplate, {
layersClass: layersClass
});
});
This would return exactly the same as your html variable, but seperated the HTML from your JavaScript code.
Seperate CSS
To seperate the CSS style from your HorizontalSlider you could define an id property and just put your CSS in a seperate CSS file. Your HorizontalSlider would become:
HorizontalSlider({
name: "slider",
value: parseFloat(layer.opacity),
minimum: 0,
maximum: 1,
showButtons: false,
discreteValues: 20,
intermediateChanges: true,
id: "mySlider",
onChange: function (value) {
layer.setOpacity(value);
}
}, "layerSlider" + index);
Now you can use the following CSS:
#mySlider {
width:100px;
display:inline-block;
*display:inline;
vertical-align:middle;
}

You could store the html variable in a different place, let's say in a file called template.js. However, doing so you can't concatenate the HTML string immediately since you need to inject this layersClass variable. Here is a possible workaround :
// template.js
var template = function () {
return [
'<li class="', this.layersClass, '">',
'<div class="cover"></div>',
'<span tabindex="0" class="info" title="MyTitle"></span>',
'<span tabindex="0" class="toggle box"></span>',
'<div class="clear"></div>',
'</li>'
].join('');
};
// view.js
html = template.call({
layersClass: layerClass
});
Effective and easy to use. However, if you want to use a template in the form of a string rather than a function, you'll need a template parser. The following one will give the same kind of result as above (notice that regex capturing is not supported by IE7 split()) :
function compile(tpl) {
tpl = Array.prototype.join.call(tpl, '').split(/{{(.*?)}}/);
return Function('return [' + tpl.map(function (v, i) {
if (i % 2) return 'this["' + v + '"]';
return v && '"' + v.replace(/"/g, '\\"') + '"';
}).join(',') + '].join("");');
}
Usage example :
var template = '<b>{{text}}</b>';
var compiled = compile(template);
// compiled -> function () {
// return ["<b>",this["text"],"</b>"].join("");
// }
var html1 = compiled.call({ text: 'Some text.' });
var html2 = compiled.call({ text: 'Bold this.' });
// html1 -> "<b>Some text.</b>"
// html2 -> "<b>Bold this.</b>"
Now, let's see how you could use this tool to organize your files in a clean way.
// product.data.js
product.data = [{
name: 'Apple iPad mini',
preview: 'ipadmini.jpeg',
link: 'ipadmini.php',
price: 280
}, {
name: 'Google Nexus 7',
preview: 'nexus7.jpeg',
link: 'nexus7.php',
price: 160
}, {
name: 'Amazon Kindle Fire',
base64: 'kindlefire.jpeg',
link: 'kindlefire.php',
price: 230
}];
// product.tpl.js
product.tpl = [
'<div class="product">',
'<img src="{{preview}}" alt="{{name}}" />',
'<span>{{name}} - ${{price}}</span>',
'details',
'</div>'
];
// product.view.js
var html = [];
var compiled = compile(product.tpl);
for (var i = 0, l = product.data.length; i < l; i++) {
html.push(compiled.call(product.data[i]));
}
document.getElementById('products').innerHTML = html.join('');
Demo : http://jsfiddle.net/wared/EzG3p/.
More details here : https://stackoverflow.com/a/20886377/1636522.
This compile function might not be enough for your needs, I mean, you might quickly need something more powerful that includes conditional structures for example. In this case, you may take a look at Mustache, Handlebars, John Resig or Google "javascript templating engine".

Consider using templates for building dynamic view elements
E.g:
http://handlebarsjs.com/
http://underscorejs.org/#template

One way is to use HTML (not that cool if you don't like to split your logic):
<div style="display:none" id="jQ_addLayer">
<div class="cover"></div>
<span tabindex="0" class="info" title="MyTitle"></span>
<span tabindex="0" class="toggle box"></span>
<div class="clear"></div>
</div>
than in jQuery create the LI with the passed variable and insert your #jQ_addLayer content:
var html = '<li class="'+layersClass+'">'+ $("#jQ_addLayer").html() +'</li>';
Another way is to escape your string newlines:
var html = '\
<li class="' + layersClass + '">\
<div class="cover"></div>\
<span tabindex="0" class="info" title="MyTitle"></span>\
<span tabindex="0" class="toggle box"></span>\
<div class="clear"></div>\
</li>'; //don't forget to escape possible textual single-quotes in your string

Append "<li><a hef='#'>text</a></li>" to "<ul>" using jQuery foreach & append

I am trying to create a list of links dynamically using the results from a call to a web service. I have the <ul> element in my HTML.
<ul id="myList"></ul>
And I am trying to use jQuery foreach and append to create the list items.
Given the following data:
var options = {
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"}
};
I thought I could create the list using the following script:
$each(options, function(index) {
$("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href })).text(options[index].text));
});
Although it is kind of working, the text is ending up outside of the anchor elements. What I want to end up with is:
<ul id="myList">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
Can anybody tell me where I am going wrong?
Thanks.

You were close, but your syntax is slightly wrong.
var options = [
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"}
];
$.each(options, function(index) {
$("#myList").append($("<li>", {}).append($("<a>", { href: options[index].href }).text(options[index].text)));
});
You need an array of options which contain your objects. You also had a syntax error on $.each. Example: http://jsfiddle.net/5ZDZX/1/

I think you might be nesting the appends incorrectly. Try:
$.each(options, function(index) {
$("#myList").append(
$("<li>", {}).append(
$("<a>", { href: options[index].href }).text(
options[index].text
)
)
);
});
The way you had it, you were adding the text to the <li> and not the <a>.

Try this
$.each(options, function(index) {
$("#myList").append($("<li>").append($("<a>", { href: options[index].href , text : options[index].text})));
});
http://jsfiddle.net/uMUzf/

That's because you're setting the .text of the li not the a tag.
Also, your option object is set up incorrectly using { } instead of [ ]
DEMO: http://jsfiddle.net/4WTG3/
Try this:
var options = [
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"},
{href: "#", text:"text"}
];
$.each(options, function(index) {
$("#myList")
.append($("<li>", {})
.append($("<a>", { href: options[index].href }).text(options[index].text)
));
});

You need array of objects and your append statement seems a bit overly complicated:
http://jsfiddle.net/x23ja/
You also needed to use $.each instead of $each

I used this succesfully
$.each(result, function (i, file) {
$("#filelist").append('<li><a target="_blank" href="' + downloadUrl + '/' + file.StaticFileId + '">' + file.ShortDesc + '</a></li>');
});

Suggest any Good mustache document

Suggest me any good mustache doc. Also i want to know in a mushtach loop how do i get the count or the loop no. I mean how can i do a for loop in mustache.
In the below code i wish to change the id in every loop
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<script>
var data, template, html;
data = {
name : "Some Tuts+ Sites",
big: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
}
}
};
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no"> {{#url}} {{.}} {{/url}} </li> {{/big}} </ul>';
html = Mustache.to_html(template, data);
document.write(html)
</script>
<body></body>

You can't get at the array index in Mustache, Mustache is deliberately simple and wants you to do all the work when you set up your data.
However, you can tweak your data to include the indices:
data = {
//...
big: [
{ i: 0, v: "Nettuts+" },
{ i: 1, v: "Psdtuts+" },
{ i: 2, v: "Mobiletuts+" }
],
//...
};
and then adjust your template to use {{i}} in the id attributes and {{v}} instead of {{.}} for the text:
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no-{{i}}"> {{#url}} {{v}} {{/url}} </li> {{/big}} </ul>';
And as an aside, you probably want to include a scheme in your url:
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
//---------------^^^^^^^
}
}
Demo: http://jsfiddle.net/ambiguous/SFXGG/

Expanding on #mu's answer, you could also keep an index in the data object and have the template refer to it and the function increment it. So you wouldn't need to add i to each item.
see demo : http://jsfiddle.net/5vsZ2/