kiểu hàng thay thế với $ index binding

Question

Tôi gặp sự cố khi nhận một lớp css thay thế được áp dụng cho mẫu loại trực tiếp với ngữ cảnh ràng buộc foreach. Tôi đang sử dụng loại trực tiếp 2.1 với biến ngữ cảnh $index có sẵn.

Đây là whats khó hiểu:

Template My

<li class="row" data-bind="css: { alt: $index%2 }"></li> 

kết quả trong không alt lớp học đang được áp dụng, tuy nhiên:

<li class="row" data-bind="text: $index"></li> 

công trình đúng và hiển thị số liên tiếp.

Answer 1

tôi vật lộn với điều này cho một vài phút và phát hiện ra rằng câu hỏi này vẫn chưa thực sự được bao phủ kể từ khi mới binding context variables (như $index) đã được giới thiệu trong knockout 2.1

Sai lầm tôi đã làm là tôi chỉ đơn giản quên rằng $index chính nó là một quan sát, và phải được unwrapped nếu chúng ta đang sử dụng nó trong một biểu thức trong thuộc tính data-binding. tức là,

<li class="row" data-bind="css: { alt: $index%2 }"></li> 

nên trở thành

<li class="row" data-bind="css: { alt: $index()%2 }"></li> 

woops :)

Answer 2

Đừng làm styling hàng xen kẽ với Javascript, CSS sử dụng đó là cách hiệu quả hơn :)

https://developer.mozilla.org/en-US/docs/CSS/:nth-child