knockout.js 데이터 바인딩 루프가있는 경우

Question

foreach 루프 내에서 생성되는 추가 div가 브라우저에서 여분의 공백 높이를 표시하지 못하도록 knockout.js 및/또는 CSS에 대한 모범 사례가 있습니까?

출처 :

<div data-bind="foreach: jobs" > 
    <div data-bind="if: JobPhase.Id() == 3"> 
    <div data-bind="text: JobPhase.Id"></div>        
    </div> 
</div> 

결과 :

<div data-bind="if: JobPhase.Id() == 3"></div> 
<div data-bind="if: JobPhase.Id() == 3"></div> 
<div data-bind="if: JobPhase.Id() == 3"></div> 
<div data-bind="if: JobPhase.Id() == 3"> 
    //This one matched so it will display the content. 
</div> 

처음 세 항목이 일치하지 않습니다하지만 난 여전히 공백을보고 있어요. 생각?

Answer 1

솔루션에서 div가 렌더링되고 비어있게 렌더링됩니다. 실제로는 그렇지 않습니다. "if" 문을 사용해야합니다. Example에서와 같이.

<div data-bind="foreach: jobs" > 
    <!-- ko if: Id == 3 --> 
    <div data-bind="text: Id"></div>       
    <!-- /ko--> 
</div> 

그래서 대신 그들에게 모든 시간을 만드는, 필요할 경우에만 DIV 블록을 만들 수있을 것입니다.