Geek Answers Handbook

Does the knockout have a delimiter pattern?

When binding:

<div data-bind='template: { name: "personTemplate", foreach: someObservableArrayOfPeople }'> </div>

Is it possible to specify some kind of separator pattern similar to the separator pattern in Classic ASP.NET?

+4
source share
2 answers

There is currently no way to specify a separator pattern.

However, I think there are several options:

  • include content in your "personTemplate"
  • use a wrapper template that displays the personTemplate file and then separatorTemplate and point to it from the template binding (this way you can reuse the delimiter template if necessary)
  • use the afterRender option of the template binding to insert content.
+3
source

If your needs are more presentable, then behavioral (i.e. just a stylistic separator), and you don't need to support older browsers, you should consider whether CSS can do the trick.

Imagine your DOM created by KO looks like this:

 <div data-bind="template: bla bla"> <div class="tmpl">template instance 1</div> <div class="tmpl">template instance 2</div> <div class="tmpl">template instance 3</div> <div class="tmpl">template instance 4</div> </div>

You can insert “separators” using the ::after pseudo-class, and then disable it for the last element.

 .tmpl::after { content:''; display:block; background-color: silver; height: 2px; margin:5px 0; } .tmpl:last-child::after { display: none; }

Depending on your use case, you can really do quite a lot with the generated blocks in CSS, and it is always a good day when you can cut some JS and put CSS instead;)

Exmaple fiddle http://jsfiddle.net/RTD7q/

+1
source

More articles:


All Articles