녹아웃 Js는 Json 값을 기반으로하는 데이터 바인딩 인 경우 다르게 렌더링합니다.

Question

다음 코드와 비슷하지만 자본을 cityName Barnsley으로 다르게 렌더링하고 다른 이름으로 도시를 다르게 렌더링하려고합니다. 바인딩의 경우 을 수행하는 올바른 방법은 무엇입니까? cityName을 관측 가능으로 두어야합니까?

<ul data-bind="foreach: planets"> 
    <li> 
     Planet: <b data-bind="text: name"> </b> 
     <div data-bind="if: capital"> 
      Capital: <b data-bind="text: capital.cityName"> </b> 
     </div> 
    </li> 
</ul> 


<script> 
    ko.applyBindings({ 
     planets: [ 
      { name: 'Mercury', capital: null }, 
      { name: 'Earth', capital: { cityName: 'Barnsley' } }   
     ] 
    }); 
</script> 

확인은 여전히 ​​성공은 내 JSON이 없습니다 :

var Images = { 
    "ImageInfo": [ 
     { 
      "thumbs": [ 
       { 
        "IMAGE": "url(http://...d38508d4f183.jpg)", 
        "type": "img" 
       }, 
       { 
        "IMAGE": "url(http://...d38508d4f183.jpg)", 
        "type": "video" 
       } 
      ] 
     }, 
     { 
      "thumbs": [ 
       { 
        "IMAGE": "url(http://...d38508d4f183.jpg)", 
        "type": "img" 
       }, 
       { 
        "IMAGE": "url(http://...d38508d4f183.jpg)", 
        "type": "video" 
       } 
      ] 
     } 
    ] 
}; 

내가 달성하고자하는 HTML은 다음과 같습니다 :

<div id="Images"> 
     <div data-bind="foreach: ViewModelB"> 

      <div data-bind="foreach: thumbs"> 
       <div data-bind="if: type == 'img'"> 
        <a style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></a> 
       </div> 
       <div data-bind="if: type == 'video'"> 
        <p style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></p> 
       </div> 
      </div> 
     </div> 
    </div> 
<script> 
var ViewModelB = ko.mapping.fromJS(Images); 
     ko.applyBindings(ViewModelB, document.getElementById("Images")); 
</script> 

어떤 도움이 많이 주시면 감사합니다! 당신은 거의가

Answer 1

, 그것은, 진술과 다르게 렌더링하는 경우 당신이 할 수있는, 그 이후에 변경을하지 않을 경우 관찰 할 수 당신은 또한 경우에 전환 할 수

<ul data-bind="foreach: planets"> 
    <li> 
     Planet: <b data-bind="text: name"> </b> 
     <div data-bind="if: capital"> 
       <!-- ko if:capital.cityName=='Barnsley' --> 
      Capital: <b data-bind="text: capital.cityName"> </b> 
       <!-- /ko --> 
      <!-- ko if:capital.cityName=='asdad' --> 
      Capital: <i data-bind="text: capital.cityName"> </b> 
       <!-- /ko --> 
     </div> 
    </li> 
</ul> 

이하 또는 같은 것을 나던 https://github.com/mbest/knockout-switch-case

Answer 2

아니요 관측 할 필요는 없습니다 (나중에 변경되지 않는 한 변경 사항이보기에 자동으로 반영되지 않음). 제안 된 바인딩이 거의 나타납니다. 오른쪽 : data-bind="if: cityName=='Barnsley'"이어야합니다 (콜론과 따옴표에 유의하십시오).