나는 다음과 같은 구조의 관찰 배열을 녹아웃

Question

바인딩 (여기서 유형의 텍스트 또는 IMG가 될 수 있습니다) 경우 내에서 불필요한하는 div를 제거하기 또는 텍스트 한 무리. 그래서 if binding을 사용하고 있습니다. result looks the way I expected,하지만 문제는 기본 HTML에 다음 문이 false를 반환하는 경우

<div data-bind="foreach: elements"> 
    <div data-bind="if: type == 'text'"><div data-bind="text: info">Hello</div>  </div> 
    <div data-bind="if: type == 'img'"></div> // Do not want it to be here 

    <div data-bind="if: type == 'text'"></div> // Do not want it to be here 
    <div data-bind="if: type == 'img'"><img data-bind="attr: { 'src': info}" src="http://cdn.zendesk.com/images/documentation/apps/logo-small.png"> 
    </div> 
</div> 

그것은 빈 <divs>를 삽입 유지합니다.

나는 나는 다음과 같은 오류가 발생했습니다 putting if and text binding in the same element으로 원하는 것을 달성했을 때 :

Multiple bindings (if and text) are trying to control descendant bindings of the same

내가 바인딩 경우 내 출력 HTML에서 불필요한하는 div 제거 할 수있는 방법

?

if 바인딩을 사용하여 구현하는 것이 불가능할 경우 다른 방법으로이 작업을 수행 할 수 있습니까? 왜냐하면 내가 '텍스트'또는 'img'유형뿐만 아니라 '비디오'및 여덟 가지 다른 것들을 가질 것이기 때문에 나는 그것들을 공예품처럼 거기에 모두 비어있게 할 것입니다.

Answer 1

당신이 추가 된 div 필요하지 않은 경우 주석 태그를 기반으로하는의 if 바인딩의 containerless control flow syntax 사용할 수 있습니다

<div data-bind="foreach: elements"> 
    <!-- ko if: type == 'text' --> 
     <div data-bind="text: info"></div> 
    <!-- /ko --> 
    <!-- ko if: type == 'img' --> 
     <img data-bind="attr: { 'src': info}" /> 
    <!-- /ko --> 
</div> 

데모 JSFiddle합니다.

별도의 div의 몇 추가 의견 :

그리고 생성 된 DOM 같은 보일 것입니다.

이 댓글을 없애려면 you can use templates.

Answer 2

여분의 div를 제거 할 수 없습니다. 나는 당신이 정기적으로하고있는 일을 if 바인딩을 사용합니다.

오류는 단순히 경쟁 바인딩이 있음을 나타내며 if 및 visible 바인딩으로 예상됩니다. if 및 visible 바인딩은 항상 한 자리수 높을수록 좋습니다.

다음은 Google의 개발 도구를 사용하는 나의 DOM의 스크린 샷입니다. 웹 응용 프로그램이 실제로 실행되고 있으며 사용자가 선택한보기를 나타 내기 위해 if 바인딩을 사용합니다.

여분의 div를 단순히 결합 if의 유물이다.

if 바인딩이 모두 사라지면, 조건이 만족되고 뷰의 일부가 표시되어야 할 때 DOM에 어떤 것이 남아 있을까요? template 접근 방식을 재검토시

UPDATE

, 당신은 VM에서 관측에 템플릿의 name을 결합, 뷰 모델 (VM)로 논리를 밀어하고 동적 기반으로 템플릿을 설정할 수 있습니다 그 논리. 그러나 템플릿 자체가 DOM에 매달려 있습니다. 그래서 여기에 순익이 있다고 생각하지 않습니다.