I am using this theme http://twbs.github.io/bootstrap/examples/justified-nav/
I want to instantiate the documents of my collections in jade view and (create pagination later on), but my question is about having an HTML or Jade example just to figure out the further process.
this is my div to loop:
<div class="row">
<div class="col-lg-4">
<h2>Safari bug warning!</h2>
<p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
</div>
Let say I have just 12 documents in my collection, how do I loop trough my collection to create
4 <div class="row"> and each one of these <div class="row"> have 3 <div class="col-lg-4"> and
each <div class="col-lg-4"> have a:
<h2>= product.title
<p> = product.imgurl
<p> = product.description
<p> = prodcuct.url
I know how to route, access the db, display on jade engine...I made simple test all successful, but to get to the next-level I would appreciate some explanations or a small example.
I resolved myself:
each product, i in products
div
div
h1 = product.title
p = product.imgurl
p = product.description
p = prodcuct.url
I just made a small, quick and dirty example out of your provided informations, I hope it will help you to do the last few steps to get familiar with Jade and co.
First your collection, just a small example (only with 8 examples):
{
products: [{title: 'xyz', imgurl: 'http://www.example.com/img.jpeg',
description: 'more text',
url: 'http://www.example.com/'},
{title: 'abc', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'fgh', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'tgb', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/another'},
{title: 'qwe', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anotherz'},
{title: 'asd', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anothery'},
{title: 'hjk', imgurl: 'http://www.example.com/anotherimg.jpeg',
description: 'a lot more text',
url: 'http://www.example.com/anotherx'}]
}
This is what you pass through res.render in your node app.
Next we have your Jade markup, your example is not that wrong, I changed only a few things here:
- for (var i = 0; i < products.length; i += 4)
div.row
- for (var j = i; j < 3+i; j++)
div(class="col-lg-4")
h1= products[j].title
p= products[j].imgurl
p= products[j].description
p= products[j].url
Like you see, I put your <div class="row"> between two loops (I used for loops here, it would be easier if you pass your data in an other way. What I try to say: This example is not fail safe, e.g. if you don't have data that has 3 cols you will get an error like Cannot read property 'title' of undefined - so here you have to set exceptions), so we don't get more than one per 3 iterations, your example would produce one div per iteration.
A class can be added by a dot. For example div.yourClass or just with div(class="yourClass" style="..." whatever="...").
Next we have the loop, after that given <div class="col-lg-4 "> for your collection data. Your data can be displayed by either tag= var or tag #{var}.
The rest should be simple to guess.
This will produce following HTML code:
<div class="row">
<div class="col-lg-4">
<h1>xyz</h1>
<p>http://www.example.com/img.jpeg</p>
<p>more text</p>
<p>http://www.example.com/</p>
</div>
<div class="col-lg-4">
<h1>abc</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/another</p>
</div>
<div class="col-lg-4">
<h1>fgh</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/another</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h1>qwe</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anotherz</p>
</div>
<div class="col-lg-4">
<h1>asd</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anothery</p>
</div>
<div class="col-lg-4">
<h1>hjk</h1>
<p>http://www.example.com/anotherimg.jpeg</p>
<p>a lot more text</p>
<p>http://www.example.com/anotherx</p>
</div>
</div>
You see the <p> tag for links makes here not that much sense, but you can easily change them to an <a> tag, it is always the same procedure.
Important, in your Jade markup, is the right indentation, everything shifted is between the opening tag and the close tag.
So the loop is in div row, the data in your cols.