Summary:
Child categories nested inside of Parent Categories are not getting rendered in a Meteor template.
Details:
Consider a data model for 'Category' as such:
// Model Schema
Category {
idCategory : 20, (id of the category itself)
idCategoryParent : 0, (idCategory of our parent category)
defaultLabel : "Movies" (our label)
}
There are parent categories and child categories. Parent categories have an idCategoryParent property value of 0. Child categories store the idCategory of their parents as their idCategoryParent property. I'm trying to loop through a collection of these Categories and render them in the following way:
<b>Movies</b> // parent category is in bold
<ul> // child categories are rendered as an unordered list
<li>Horror</li>
<li>Comedy</li>
<li>Action</li>
<li>Drama</li>
</ul>
<b>Music</b>
<ul>
<li>Rock</li>
<li>Classical</li>
<li>Ambient</li>
</ul>
However, this is what I actually get:
<b>Movies</b>
<ul> // empty...
</ul>
<b>Music</b>
<ul>
</ul>
Source Code:
// How we get the 'categories_parents' data
Template.content.categories_parents = function (){
/*
* Get all parent categories (categories with an idCategoryParent of 0)
*/
var parents = Categories.find({idCategoryParent:0});
var pCount = parents.count();
for (var i = 0; i < pCount; i++){
var pId = parents.db_objects[i]['idCategory'];
/*
* Get all child categories of the parent (categories with
* an idCategoryParent equal to value of parent category's idCategory).
*/
var children = Categories.find({idCategoryParent:pId});
var cCount = children.count();
/*
* Assign the child categories array as a property of the parent category
* so that we can access it easily in the template #each expression
*/
parents.db_objects[i]['children'] = children;
}
return parents;
}
// This is our template
<template name="content">
<h1>Categories</h1>
{{#each categories_parents}}
<b>{{defaultLabel}}</b><br />
<ul>
{{#each children}}
<li>{{defaultLabel}}</li>
{{/each}}
</ul>
{{/each}}
</template>
Other template configurations I have tried in troubleshooting:
{{#each children}}
<li>A Child Exists Here</li> // Even this never rendered... no children?
{{/each}}
Any clues as to why this is happening would be appreciated.
Your model is kind of iffy... Consider
{name:"Category name", parent:"_id of parent category"}
Okay, that's a lot simpler. To create a category.
var moviesId = Categories.insert({name:"Movies"});
Categories.insert({name:"Horror",parent:moviesId});
That was easy enough. Now, to render in a way that {{#each}} works:
Template.categories.categories = function(parent) {
if (parent) {
return Categories.find({parent:parent}).fetch();
} else {
return Categories.find({parent:{$exists:false}});
}
}
You might be seeing where this is going...
<template name="categories">
{{#each categories}}
<ul>{{name}}
{{#each categories _id}}
<li>{{name}}</li>
{{/each}}
</ul>
{{/each}}
</template>
Now I'm not sure if the {{#each}} block helper can take a function argument when it calls another helper. If it doesn't...
Template.categories.categories = function() {
return Categories.find({parent:{$exists:false}}).map(function(parentCategory) {
return _.extend(parentCategory,
{children:Categories.find({parent:parentCategory._id}).fetch()});
});
}
That's a real doozy. It returns parent categories with a new "children" list property, that contains all the children categories. Now you can do:
<template name="categories">
{{#each categories}}
<ul>{{name}}
{{#each children}}
<li>{{name}}</li>
{{/each}}
</ul>
{{/each}}
</template>
Clever, eh?
I don't know about db_objects, when I try and access that property on a cursor (which is what find() returns), it's null.
You could fetch the items that matches your query instead, and then do your iteration:
Template.content.categories_parents = function (){
var parents = Categories.find({idCategoryParent:0}).fetch(); // Returns an array.
for (var i = 0; i < parents.length; i++){
var pId = parents[i]['idCategory'];
var children = Categories.find({idCategoryParent:pId});
// No need for array here, cursor is fine.
parents.db_objects[i]['children'] = children;
}
return parents;
}
I'm new at this myself, so maybe there's a more efficient way of doing it, but I don't know it currently.
Update after Eric's comment.
The js file looks like this:
Categories = new Meteor.Collection("categories");
if (Meteor.isClient) {
Template.categories.categories = function () {
var parents = Categories.find({idCategoryParent:0}).fetch();
for (var i = 0; i < parents.length; i += 1) {
var pId = parents[i]['idCategory'];
var children = Categories.find({idCategoryParent:pId});
parents[i]['children'] = children;
}
return parents;
};
}
if (Meteor.isServer) {
Meteor.startup(function () {
Categories.remove({});
var data = [
{idCategoryParent: 0, idCategory: 1, label: "Movies"},
{idCategoryParent: 1, idCategory: 0, label: "Science Fiction"},
{idCategoryParent: 1, idCategory: 0, label: "Drama"},
{idCategoryParent: 0, idCategory: 2, label: "Music"},
{idCategoryParent: 2, idCategory: 0, label: "Jazz"},
{idCategoryParent: 2, idCategory: 0, label: "Piano"}
];
for (var i = 0; i < data.length; i += 1) {
Categories.insert(data[i]);
}
});
}
The html file looks like this:
<head>
<title>nested_template</title>
</head>
<body>
{{> categories}}
</body>
<template name="categories">
<h1>Categories</h1>
{{#each categories}}
<b>{{label}}</b>
<ul>
{{#each children}}
<li>{{label}}</li>
{{/each}}
</ul>
{{/each}}
</template>
It works just fine for me.
Solved.
My solution was to remove the {{#each}} logic from the template and replace it with a single handlebars helper expression, and pass back the needed html all at once. The html is generated from data in the cursor of the Categories collection.
Not so sure about having all this html in my logic though -- is this bad design? If so I'll defer to a better answer.
// This is the new template
<template name="content">
<h1>Categories</h1>
{{listCategories}}
</template>
// Handlebars helper
Handlebars.registerHelper('listCategories', function() {
var parents = Categories.find({idCategoryParent:0});
var countParents = parents.count();
var string = '';
// iterate over each parent category
for(m = 0; m < countParents; m++){
// Get the parents category id
var pId = parents.db_objects[m].idCategory;
var children = Categories.find({idCategoryParent:pId});
var count = children.count();
/*
* Build the Parent Category html
* Example: <b>Movies</b><ul>
*/
string = string + '<b>' + parents.db_objects[m].defaultLabel + '</b><ul>';
// iterate over each child category
for(var i = 0; i < count; i++){
/*
* Build the child category html
* Example: <li>Horror</li>
*/
string = string + '<li>' + children.db_objects[i]['defaultLabel'] + '</li>';
}
// Close up the unordered list
string = string + '</ul>';
}
// Return the string as raw html
return new Handlebars.SafeString(string);
});
// Rendered out the result correctly like so:
<b>Movies</b>
<ul>
<li>Horror</li>
<li>Comedy</li>
<li>Action</li>
<li>Drama</li>
</ul>
<b>Music</b>
<ul>
<li>Rock</li>
<li>Classical</li>
<li>Ambient</li>
</ul>
Related
I have an array of tracks coming from a database that I want to display in a div.
More specifically I need to put every two of them in a bootstrap row. I can easily do it in the controller JS file by first collecting all in a fragment element and then use a loop to put them into the rows and then in the target div but I am wondering if it would be possible to do it directly while producing them in handlebars?
Here is the handlebars template:
{{#if result}}
{{#each result}}
<div class="playlist-item col-xs-4">
<a href="#/user/{{username}}/playlist/{{id}}" class="no-style">
<h3 class="result-title">{{title}}</h3>
<p class="result-description">{{description}}</p>
<img class="result-image img-circle" src="{{img}}">
</a>
<br>
<a type="button" id="{{id.videoId}}" class="btn btn-default btn-remove"
href="#/user/{{username}}/playlist/{{id}}/remove-from-playlist">Remove from
playlist</a>
</div>
{{/each}}
{{else}}
<h4>You currently have no tracks in your playlist</h4>
{{/if}}
Here is the JS:
showPlaylist() {
return Promise.all([
userController.loadPlaylist(),
templates.loadTemplate('playlist'),
])
.then(([tracks, template]) => {
let fragment = document.createDocumentFragment()
let div = document.createElement('DIV');
div.innerHTML = template(tracks);
div = [...div.children];
let len = div.length
while(div.length > 0) {
let row = document.createElement('div')
row.className = 'row'
let col = div.splice(0,2)
row.append(col[0])
if(col[1]) {
row.append(col[1])
}
len -= 2;
fragment.append(row)
}
$('#container').html(fragment)
})
}
It is possible to group your items into rows, but you would need to use a custom helper function to do it.
We will need to create a block helper that takes an array of items, breaks the array into rows of specified number of columns, and then applies the block "row" template to each row. If we were to call our block helper "eachRow", the resulting template might look like the following:
{{#eachRow result 2}}
<div class="row">
{{#each columns}}
<div class="playlist-item col-xs-4">
{{!-- TODO: Rest of item template goes here. --}}
</div>
{{/each}}
</div>
{{/eachRow}}
Notice that we still use the item template within a regular Handlebars #each block. Except now the #each is wrapped within a "row" template block. The 2 is a parameter that will be passed to our helper that is to be the number of columns in each row.
Next, we will write our helper:
Handlebars.registerHelper('eachRow', function (items, numColumns, options) {
var result = '';
for (var i = 0; i < items.length; i += numColumns) {
result += options.fn({
columns: items.slice(i, i + numColumns)
});
}
return result;
});
This helper simply iterates over our source array in increments of numColumns and for each iteration applies our "row" block template, passing the array of items (columns) that are to render in that row. The helper concatenates the rows and returns the result.
I have created a fiddle for reference.
How can I output the peoples names below? e.g. Martin and Tabitha?
people:
- martin:
job: Developer
skills:
- python
- perl
- pascal
- tabitha:
job: Developer
skills:
- lisp
- fortran
- erlang
Here's the loop:
{{#each people}}
{{ this }}
{{/each}}
I've found the answer to be:
{{#each people}}
{{#key}}: {{this}}
{{/each}}
You can create a block helper list to iterate over people and use the current index as a private variable to obtain the name which is the first key in the object: Object.keys(context[i])[0].
Code:
var people = [{"martin": {"job": "Developer","skills": ["python","perl","pascal"]}}, {"tabitha": {"job": "Developer","skills": ["lisp","fortran","erlang"]}}];
// Register list helper
Handlebars.registerHelper('list', function (context, options) {
var out = '<ul>',
data;
if (options.data) {
data = Handlebars.createFrame(options.data);
}
for (var i = 0, l = context.length; i < l; i++) {
if (data) {
data.index = Object.keys(context[i])[0];
}
out += '<li>' + options.fn(context[i], {
data: data
}) + '</li>';
}
out += '</ul>';
return out;
});
// The main template
var main = Handlebars.compile($('#main').html());
// Register the list partial that 'main' uses
Handlebars.registerPartial('list', $('#list').html());
// Render the list
$('#output').html(main({
people: people
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="list" type="x-handlebars-template">
{{#list people}}
{{#index}}
{{/list}}
</script>
<script id="main" type="x-handlebars-template">
{{> list}}
</script>
<div id="output"></div>
Note: I have converted the yaml to an array for the code example.
The same way, I can manually do filter: { category : 'Popular'} in ng-repeat, I'd like to be able to do the same thing with the dropdown.
I was able to make the basics work. I have two problems: I don't want the categories to duplicate themselves in the dropdown, I'd like to be able to see everything categorized "Popular" when I select "Popular" in the dropdown.
Here is my HTML:
<div ng-controller="SuperCtrl" class="row">
<ul class="small-12 medium-12 columns">
<select ng-model="find" ng-options="entry.category for entry in parsedEntries"><option value="">Select Category</option></select>.
<li ng-repeat="entry in parsedEntries | filter: find">
<strong>{{ entry.title }} </strong><br>
{{ entry.description }}
</li>
</ul></div>
Here is the controller:
app.controller('SuperCtrl', ['$scope', '$http', function($scope,$http) {
var url = 'https://spreadsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json'
var parse = function(entry) {
var category = entry['gsx$category']['$t'];
var description = entry['gsx$description']['$t'];
var title = entry['gsx$title']['$t'];
return {
category: category,
description: description,
title: title
};
}
$http.get(url)
.success(function(response) {
var entries = response['feed']['entry'];
$scope.parsedEntries = [];
for (key in entries) {
var content = entries[key];
$scope.parsedEntries.push(parse(content));
}
});
}]);
Got it working as you want with :
<select ng-model="find" ng-options="entry.category as entry.category for entry in parsedEntries | unique: 'category'">
The unique filter is from angular-filter. It requires to add 'angular.filter' you to your modules dependencies:
var app = angular.module('myApp', ['angular.filter']);
See fiddle
NB: Not a problem by itself but I took the <select> element out of the <ul> one.
Just put unique categories into in a string array called categories, sort the array, and display it with ng-options:
<select ng-model="find" ng-options="category as category for category in categories"><option value="">Select Category</option></select>.
Append this to your code after your parse function, and delete the $http.get you had. This defines a contains function and builds the array at the same time the objects come back:
function contains(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return true;
}
}
return false;
};
$http.get(url)
.success(function(response) {
var entries = response['feed']['entry'];
$scope.parsedEntries = [];
$scope.categories = [];
for (key in entries) {
var content = entries[key];
var obj = parse(content);
$scope.parsedEntries.push(obj);
if (!contains($scope.categories, obj.category))
{
$scope.categories.push(obj.category);
}
}
$scope.categories.sort();
})
I am trying to link the data from foos and selectedFoos. I wish to list the selectedFoos and show the name from the foos object. The fooid in the selectedFoos would be linked to the foos id.
EDIT: I dont want to alter the structure of foos or selectedFoos.
fiddle is here
Html, Template
<div id="content"></div>
<script id="content_gen" type="x-jsrender">
<ul> {^{for sf}}
<li > {{: fooid}} - {{: code}} {{foo.name}} </li>
{{/for}}
</ul>
</script>
JS
var foos = [{
"id": 1,
"name": "a"
}, {
"id": 2,
"name": "b"
}, {
"id": 3,
"name": "c"
}];
var selectedFoos = [{
"fooid": 1,
"code": "z"
}, {
"fooid": 3,
"code": "w"
}];
var app = {
sf: selectedFoos,
f: foos
};
var templ = $.templates("#content_gen");
templ.link("#content", app);
You could add a view converter to lookup the name by id.
Like this - http://jsfiddle.net/Fz4Kd/11/
<div id="content"></div>
<script id="content_gen" type="x-jsrender">
<ul> {^{for sf}}
<li>{{id2name:fooid ~root.f }} - {{: code}} </li>
{{/for}}
</ul>
</script>
js
var app = {
sf: selectedFoos,
f: foos
};
$.views.converters("id2name", function (id, foos) {
var r = $.grep(foos, function (o) {
return o.id == id;
})
return (r.length > 0) ? r[0].name : '';
});
var templ = $.templates("#content_gen");
templ.link("#content", app);
Scott's answer is nice. But since you are using JsViews - you may want to data-link so you bind to the name and code values. Interesting case here, where you want to bind while in effect traversing a lookup...
So there are several possible approaches. Here is a jsfiddle: http://jsfiddle.net/BorisMoore/7Jwrd/2/ that takes a modified version of Scott's fiddle, with a slightly simplified converter approach, but in addition shows using nested {{for}} loops, as well as two different examples of using helper functions.
You can modify the name or the code, and see how the update works. You'll see that code updates in all cases, but to get the name to update is more tricky given the lookup.
You'll see that in the following two approaches, even the data-binding to the name works too.
Nested for loops
Template:
{^{for sf }}
{^{for ~root.f ~fooid=fooid ~sf=#data}}
{{if id === ~fooid}}
<li>{^{:name}} - {^{:~sf.code}} </li>
{{/if}}
{{/for}}
{{/for}}
Helper returning the lookup object
Helper:
function getFoo(fooid) {
var r = $.grep(foos, function (o) {
return o.id == fooid;
})
return r[0] || {name: ""};
}
Template:
{^{for sf}}
<li>{^{:~getFoo(fooid).name}} - {^{:code}} </li>
{{/for}}
See the many topics and samples here
http://www.jsviews.com
such as the following:
http://www.jsviews.com/#converters
http://www.jsviews.com/#helpers
http://www.jsviews.com/#fortag
http://www.jsviews.com/#iftag
http://www.jsviews.com/#samples/data-link/for-and-if
You should iterate over selectedFoos and lookup the name with fooid by iterating over foos. Then combine that data before rendering.
function getNameById(id) {
for (var i = 0; i < foos.length; i++)
if (foos[i].id == id)
return foos[i].name;
return '';
}
This function will return the name when given the id.
Usage:
alert(getNameById(2)); // alerts "b"
I have this XML response: http://jsfiddle.net/ZeeHv/
I'm trying to create something like this using the information from the dump:
<UL>
<li>Academic
<ul>
<li>BM</li>
<li>CMTTE</LI>
<li>DM</li>
<li>PM</li>
</ul>
</li>
</ul>
<ul>
<li>ARCHIVE</li>
</UL>
<ul>
<LI>ASSOCIATIONS
<ul>
<li>BM</li>
<li>DM</LI>
<li>PM</li>
</ul>
</LI>
</ul>
In the end the XML can give me a list of all my sites and subsits:
https://hosted.demo.ca
https://hosted.demo.ca/academic
https://hosted.demo.ca/academic/bm
https://hosted.demo.ca/academic/cmtte
https://hosted.demo.ca/academic/dm
https://hosted.demo.ca/academic/pm
https://hosted.demo.ca/archive
https://hosted.demo.ca/associations
https://hosted.demo.ca/associations/bm
https://hosted.demo.ca/associations/dm
https://hosted.demo.ca/associations/pm
How can I go through this information and append ul and li tags to create a site navigation menu?
JS used to get XML:
function getAllSites(){
$().SPServices({
operation: "GetAllSubWebCollection",
async: true,
completefunc: function(xData, Status){
$(xData.responseXML).find("Web").each(function(){
console.log($(this).attr("Url"));
});
}
});
}
A simple solution would be to build a map of indexes based on the depth of the links, the depth is determined by the number of / in the url.
var map = {}; //init the map
for (var i = 0, l = webs.length; i < l; i++) {
//we create a index for our links based on the depth of them by `/`
var m = webs[i].attributes['Url'].value.substring(23, webs[i].attributes['Url'].value.length).split('/').length;
map[m] = map[m] || []; //make sure we leave alone the old values if there is none init with new array
map[m].push(webs[i].attributes['Url'].value); //push new value to node
}
console.log(map);
console.log(map); will output an object similar to this:
{
"1": ["https://hosted.demo.ca", "https://hosted.demo.ca/academic", "https://hosted.demo.ca/archive", ...],
"2": ["https://hosted.demo.ca/academic/bm", "https://hosted.demo.ca/academic/cmtte", ...],
}
From this you can create your list of elements.