Knockout.js templating - "건너 뛰기"루프?

그래서 여기 내 문제, 난, X는 각각 축소판이다 이론, 즉에서이 같은 3 × 3 격자를 작동 할 수있는 페이지 디자인 ...Knockout.js templating - "건너 뛰기"루프?

X X X 
X X X 
X X X

있습니다. 지금까지, 녹아웃에 대한 아무런 문제가 없습니다! 그리드를 제외하면 실제로는 이렇게 보입니다 ....

* X X 
X * * 
X * X

*는 빈 공간 (빈 자리 표시 자 그래픽)입니다. 패턴은 결코 변하지 않을 것입니다. 문제는 반복을 건너 뛰고 해당 공간을 의도 한 데이터를 중얼 거치지 않는 Knockout 템플릿 (기본 또는 JQuery 템플릿과 결합)에 몇 가지 지능을 주입 할 수 있는가하는 것입니다.

켄

출처

2012-03-20 Samurai Ken

이 모델은 각 썸네일의 SRC에 대한 속성이 있습니까? 자리 표시자가 있어야하는 공백에 대해 기본 그래픽에 대한 경로를이 특성에 추가하기 만하면됩니다. 당신은 디자인이 변하지 않기 때문에 당신은 아마 더 나은 답 :

출처

2012-03-20 08:32:43 danwellman

를 얻을 수 있습니다 코드의 좀 더 보여 주면

, 그것은 템플릿해야합니다. foreach를하는 CPU주기를 낭비하지 말고, 구멍에 구멍을내어 시도하십시오. 9 명의 각자를 당신의 뷰 모델의 분리 된 부분에 묶을 것입니다. 그런 다음 viewModel을 표시하려는 방식으로 채 웁니다.

당신은 몇 가지 옵션이 있습니다

귀하의 ViewModel 9 개 속성을 한 장소에 표시 할 엔티티에 각 세트가 - 9. 그런 다음 각 하나를 결합합니다. <div id="thirdItem" data-bind="with:item3"></div>
항상 9 개의 요소가있는 viewModel에 배열을 만듭니다. 9 개 미만의 항목에 대한 쿼리를 가져 와서 9 개의 요소 배열을 나눠서 팝업으로 항목을 배치하십시오. <div id="thirdItem" data-bind="with:items()[2]"></div>

DB 내에서 배열을 관리 할 수있는 경우 공백을 원하는 행 집합으로 침을 뱉어보십시오. 템플릿에서 true "isEmpty"열이있는 행을 다르게 처리하십시오.

정말 멋지고 더러운 예를 보려면이 피들을 확인하십시오. 스타일에 당신의 상상력을 사용해야합니다. http://jsfiddle.net/DSbtk/2/

출처

2012-03-20 12:45:20

나는 당신에게 Brandon; 뷰에서 복잡한 흐름 구조를 막기 위해 항상 뷰 모델을 설계해야합니다. – Samuel

나는 이것을 유익한 것으로 받아들이고 있으며 좋은 재료의 길로 나를 인도하기 때문에 이것을 받아 들였다. 또한 제시된대로 문제를 해결합니다. –

감사합니다 ... 또한 약간의 유스 케이스를 나타 내기 위해 바이올린을 업데이트했습니다. 여전히 스타일링은 없지만 블랭크 개념을 더 잘 나타냅니다. http://jsfiddle.net/DSbtk/2/ 기꺼이 도와 드릴 수 있습니다! –

결국 완전히 다른 방식으로 진행되었습니다. 5 개의 요소로 구성된 UL을 만들기 위해 루프 된 템플릿을 사용하여 jquerys "mason"이 나를 "그리드"에 쌓도록했습니다. 템플릿에서 루프 인덱스가있는 각 항목에 클래스를 추가하고 왼쪽 및 오른쪽 여백을 정의하여 CSS를 사용하여 원하는 간격을 지정했습니다.

켄

출처

2012-03-20 15:20:41

Knockout.js templating - "건너 뛰기"루프?

답변

관련 문제