Knockout gear alignment

Question

I have a problem with binding to jagged array in knockout-js. I searched a lot, but could not find anything. Let's make a simple example,

<div data-bind="foreach: items"> <div data-bind="style: { textAlign: align, backgroundColor: bgColor, fontFamily: fontFamily, fontSize: size, color: color }, text: title"></div> </div> 

and here is my array

 var items = [{ title: 'A', align: 'right', fontFamily: 'helvetica', color: '#777777', bgColor: '#ffffff' }, { title: 'A', align: 'right', size: 'large', fontFamily: 'helvetica' } { size: 'large', fontFamily: 'helvetica', color: '#777777' }] 

Is it clear that some property (s) are missing? Therefore, I get a * undefined * error. How to cope with this situation.

Answer 1

You have two options. You can make sure your ViewModels are not jagged. This is achieved using a knockout matching plugin against your model and using your type constructor. that way you can even define default values

another option is to refer to values ​​that are not in the data context. IE:

 <div data-bind="style: { textAlign: $data.align, backgroundColor: $data.bgColor, fontFamily: $data.fontFamily, fontSize: $data.size, color: $data.color }, text: $data.title"></div> 

script: http://jsfiddle.net/drdamour/Xp9Er/