I was writing this for the express Hbs engine, but I would like to convert it to Jade. This piece of code worked on another one of my works, but I need to have it in Jade, I have problems with the handlerbars.
{{# each products}}
<div class="row">
{{#each this}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="{{this.imagePath}}" title="ImagePreview" alt="My shopping car">
<div class="caption">
<h3>{{this.title}}</h3>
<p>{{this.description}}</p>
<div class="clearfix">
<div class="price pull-left">{{this.price}}</div>
Add to car
</div>
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
Here is the pug 2 syntax:
each productRow in products
.row: each product in productRow
.col-sm-6.col-md-4: .thumbnail
img(src=product.imagePath title="ImagePreview" alt="My shopping car")
.caption
h3=product.title
p=product.description
.clearfix
.price.pull-left=product.price
a(href="#" class="btn btn-success pull-right" role="button") Add to car
Add a - before each and , between attributes for old pug versions.
Related
I was working on a project involving node, mongoose, handlebars, express. What would be the equivalent of the following code in handlebars?
<div class="panel panel-default" ng-init="getExams()">
<div class="panel-heading">
<h3 class="panel-title">Exams</h3>
</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="exam in exams">
<div class="col-md-6">
<div class="col-md-6">
<h4>{{exam.examName}}</h4>
<a class="btn btn-primary" href="#/exams/details/{{exam._id}}">View Details</a>
</div>
</div>
</div>
</div>
I want to display all the rows of the output of the following function in my model.
module.exports.getExams = (callback, limit) => {
Exam.find(callback).limit(limit);
}
In node.js, when you're rendering :
res.render('your view'),{exams:exams}
In handlebars :
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Exams</h3>
</div>
<div class="panel-body">
<div class="row">
{{#each exams}}
<div>
<div class="col-md-6">
<div class="col-md-6">
<h4>{{examName}}</h4>
<a class="btn btn-primary" href="#/exams/details/{{_id}}">View Details</a>
</div>
</div>
</div>
{{/each}}
</div>
I'm building a small app within meteor, using the yogiben favourites package to allow users to favourite select items in a collection.
Currently the below code only shows the ID of the favourite/post, rather than the corresponding title.
How can I show the title?
<template name="favoritesSidebar">
<div class="template-favorites-sidebar">
{{#if myFavorites.count}}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "favorites"}}</h3>
</div>
<div class="panel-body">
<ul>
{{#each myFavorites collection="Posts"}}
<li>
<a>{{_id}}</a>
</li>
<li>
<a>{{_title}}</a>
</li>
<li>
<a>{{Post._title}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
</div>
</template>
I want to repeat the following code block using angular or node.js
<div class="test-item col-sm-6">
<div class="col-sm-4">
<img class="img-responsive" src="../../../../assets/image/ngozi.png">
</div>
<div class="col-sm-8">
<p>"Definitely worth the investment. Without sancoj, we would have gone bankrupt by now."</p>
<div>
<i class="material-icons checked">star</i>
<i class="material-icons checked">star</i>
<i class="material-icons checked">star</i>
<i class="material-icons checked">star</i>
<i class="material-icons checked">star</i>
</div>
</div>
</div>
Some ideas?
try to use *ngFor, for more details have a look at angular docs here,
<div class="test-item col-sm-6">
<div class="col-sm-4">
<img class="img-responsive" src="../../../../assets/image/ngozi.png">
</div>
<div class="col-sm-8">
<p>"Definitely worth the investment. Without sancoj, we would have gone bankrupt by now."</p>
<div>
<i class="material-icons checked" *ngFor="let star in stars">{{star}}</i>
</div>
</div>
</div>
i want to create a layout element, so i write the template like this
<template>
<div class="row">
<template is="dom-repeat" items="[[cols]]">
<div class$="col-[[item]]">
<slot id="id[[index]]" name="id[[index]]">no value</slot>
</div>
</template>
</div>
</template>
and in the html page file, i use this component like this:
<tcpc-row>
<span slot="id0">cc id-tcpc-col-0 </span>
<span slot="id1">cc id-tcpc-col-1 </span>
<span slot="id1">cc id-tcpc-col-3 </span>
</tcpc-row>
but i result is not correctly, when i write the template without repeat is ok, like this:
<template>
<div class="row">
<div class="col-3">
<slot name="id0"></slot>
</div>
<div class="col-3">
<slot name="id1"></slot>
</div>
<div class="col-3">
<slot name="id2"></slot>
</div>
<!--<template is="dom-repeat" items="[[cols]]">
<div class$="col-[[item]]">
<slot id="id[[index]]" name="id[[index]]">no value</slot>
</div>
</template>-->
</div>
</template>
is there have some way to add slot in repeat?
Try slotting the <div class="row">.
I am new to ionic framework. When I use ion-content like this
<ion-view>
<ion-header-bar class="bar bar-header bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<div class="row">
<div class="col">
<i class="fa fa-university"></i>
</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</ion-content>
</ion-view>
First row go inside header bar. What's the problem?
I've used requirejs to load controller .
I didn't inject ionic module during bootstraping.
After inject ionic in module this problem solved.