Develop Reference

How to adapt angular 2 code to use URIs with parameters

So far I've read https://angular.io/docs/ts/latest/guide/router.html#!#router-link and https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/
but they're a bit too dense for my level and I'm getting lost easily.
So I thought about asking if there is a simpler way of doing what I want, or if there's another way of looking at the problem.
Currently I have "half" a webpage built
http://plnkr.co/edit/BcyPlw?p=preview
, in angular2, in which I use js and ts functions to get some D3 and some maps working:
<div layout="row" layout-wrap flex>
<div flex="50" *ngFor="#item of items">
<md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
{{ item }} <span *ngIf="exists(item, selected)">selected</span>
</md-checkbox>
</div>
</div>
The idea now is to add URIs to events such as: if you click calendar, trigger an event so that I can return which cars were used in a given date, or which sessions does a car have in a given date, since I have created a webservice in java that is waiting to get something like:
#GET
#Path("/getData/{car}/{session}")
So the uri I am working with in the webservice (which I tested and works, and I want to connect with what I have in angular2 via tomcat) would be something like:
http://localhost:8080/Project/rest/projectName/getData/55/99
So I believe that is done with routing but 1º I haven't found examples that go deeper than /path (so, not /path/getData/data/data , in this case) , and 2º I am not really getting how to use what can be seen in the official tutorial { path: 'hero/:id', component: HeroDetailComponent }];
It is quite confusing and as of right now I do not feel I have the level to do all those steps (and there are many that I don't need, either), it all seems too complex

I want Handlebar {{#if}} logic inside of a Ember.Handlebars.helper

I am converting someone else's code to Handlebars.js and I'm stuck on converting this tag to its {{#handle-bar}}{{/handle-bar}} counterpart.
The previous coder used an {{#ifCond}} to toggle what 'selected'. This is my component.
{{#dropdown-item }}
{{unbound this.itemName}}
{{/dropdown-item}}
Here is the div i want converted to my component
<div class="dropdownItem" {{bind-attr value=formField_DropdownItemID}}{{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} >
{{unbound this.itemName}}
</div>
My first thought was to just pop the div's logic into the the component, like the next example, but this gave me an error.
{{#dropdown-item bind-attr value=formField_DropdownItemID {{#ifCond formField_DropdownItemID value}} selected{{/ifCond}} }}
{{unbound this.itemName}}
{{/dropdown-item}}
Any suggestions?

You can set those properties to compute. The syntax would be:
{{#dropdown-item selected=computedProperty value=formField_DropdownItemID}}
computedProperty can deal with your conditional logic. The whole idea is to pull that out of handlebars anyways. :)

How to build a grid with Blaze in Meteor.js?

I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs

check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.

Meteor showing [object Object] after creating Meteor.Router.add()

I'm following this tutorial to learn Meteor. After adding the first JS code, I'm getting [object Object] on my browser. I've followed everything as explained (except for some names that I have changed, but I haven't used any reserved words), but I cannot see anything else. This part is in the first 4 minutes. This is how my files look:
demonstration.js:
CalEvents = new Meteor.Collection('calevents');
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Meteor.Router.add({
'/':'home',
'/calendar':'calendar'
})
calendar.html:
<template name="calendar">
<div id="calendar">
Hello world! Now at calendar.
</div>
</template>
home.html:
<template name="home">
<div class="hero-unit">
<p>Manage your calendar</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</template>
demonstration.html:
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
I suspect it has something to do with the Meteor.Router.add() line, because the little I did prior to adding this worked. I have tried changing the page to show on '/' to other pages that contained a simple text, but it didn't work.
Edit to add: I am working thru Nitrous.io and I installed Meteorite prior to adding the router package.
Thanks in advance.
PS: I have searched in here and on Google but I haven't been able to find any answer to this question. If there is one, kindly point me to the right address.

Lots of examples that use Meteor prior to version 0.8 will not work, so make sure you check out a recently updated example, like those on Discover Meteor.
In this case, router has been fixed to support Meteor 0.8 and your example will work by replacing {{renderPage}} with {{> renderPage}}. However, the rest of the example probably won't work, and as others have mentioned, router has been deprecated for Iron Router.

jsRender Recursive Templating

I'm trying implement a way to recursively template using jsRender. The issue is, my data object has a unary self-referencing heirarchy which requires recursive looping to show all of the attributes. The example here is a forum post which can contain any number of reply posts. Each reply post can contain any number of children posts and so on. I have the following code working except for the recursion part. I could only find one remote reference to this via the Googles, so here is what I have thus far:
<script id="forumPostsTemplate" type="text/x-jsrender">
<article class="forumPost">
<header class="forumPostHeader">{{:PostSubject}}
<div class="info">By: Some Person, {{:CreatedDate}} Flag as innapropriate </div>
</header>
<div class="content">
{{:PostContent}}
{{for Replies}}
{{:Replies tmpl="#forumPostsTemplate"}}
{{/for}}
</div>
</article>
</script>
Does anyone have any experience with this sort of functionality? I am currently running the most recent version of jsRender if that helps.

Per this example for jsRender, does it work to call your template like this instead?
https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/06_template-composition.html
{{for Replies tmpl="#forumPostsTemplate"/}}

These three different versions of a tree tag control illustrate exactly that kind of recursion:
http://www.jsviews.com/#samples/tag-controls/tree