CODEWITHSUNDEEP
javascriptknockout.jsjquery-templates
Samurai Ken
Samurai Ken

Reputation: 810

Knockout.js templating - "skip" a loop?

So here is my problem, I have a page design to work on that is, in theory a 3 x 3 grid like this...

X X X
X X X 
X X X

Where each X is a thumbnail. So far, no problem for Knockout! Except the grid REALLY looks like this....

* X X
X * * 
X * X

Where the * is a empty space ( a blank placeholder graphic ). The pattern will never change. The question is how can I inject some smarts into Knockout templating (native or combined with JQuery templating) that will "skip" an iteration but not gobble up the data intended for that space?

Ken

Upvotes: 1

Views: 355

Answers (3)

Brandon Wittwer
Brandon Wittwer

Reputation: 381

Since the design never changes, it should be the template. Don't waste cpu cycles doing a foreach and try to finangle in holes as you go. I would bind each of the 9 placeholders to a separate piece of your viewmodel. Then just populate the viewModel the way you want to show it.

You have a few options:

  • Your viewModel has 9 properties each set to an entity you want to display in places 1 - 9. Then bind each one. <div id="thirdItem" data-bind="with:item3"></div>
  • create an array on your viewModel which always has 9 elements. Take your query of less than 9 items and split and pop the 9 element array to place your items throughout. <div id="thirdItem" data-bind="with:items()[2]"></div>

If you can manage the arrangement within your DB, just spit out into the rowset where you want your blanks. Handle a row with a true "isEmpty" column differently in the template.

check this fiddle for a really down and dirty example. You'll have to use your imagination on the styling. http://jsfiddle.net/DSbtk/2/

Upvotes: 2

Samurai Ken
Samurai Ken

Reputation: 810

In the end, I went in a totally different way. I used a looped template to make UL consisting of 5 elements then let jquerys "mason" stack them for me in a "grid". In the template, I added a class to each item with it's loop index and used CSS to define left and right margin's sufficient to force the spacing I wanted.

Ken

Upvotes: 0

danwellman
danwellman

Reputation: 9253

Does your model have an attribute for each thumbnail's src? Just add the path to the default graphic to this attribute for those spaces where the placeholders should be.

If you show some more of your code you'll probably get a better answer :)

Upvotes: 0

Related Questions