사용하여 문자열 변수를 기반으로 내가 마네의 컨테이너가 controlflow 템플릿을 사용하고

Question

템플릿 controlflow : 작동하고 HREF에 URL을 얻기

<div data-bind="foreach: myData" style="margin-top: 10px;"> 
     <div> 
      <a href="#" data-bind="attr: {href: url}" target="_blank"> 
       <img src="http://www.google.com/s2/favicons?domain={{url}}" /> 
      </a> 
     </div> 
</div> 

을,하지만 난 이미지 SRC 다시 URL 값을 호출합니다. 나는 이미지 소스의 시작 부분을 유지하고 그냥 끝에 URL을 추가하고 싶습니다. Knockout 템플릿을 사용하면 어떻게 될까요?

Answer 1

KO를 사용하면 문자열 연결과 같은 바인딩에 임의의 표현식을 쓸 수 있기 때문에이 간단한 작업에는 추가 템플릿이 필요하지 않습니다.

그래서 당신은 바인딩 attr에 URL 권한을 구축 할 수 있습니다 :

<div data-bind="foreach: myData" style="margin-top: 10px;"> 
    <div> 
     <a href="#" data-bind="attr: {href: url}" target="_blank"> 
      <img data-bind="attr: { 
       src: 'http://www.google.com/s2/favicons?domain=' + url()}" /> 
     </a> 
    </div> 
</div> 

주 : 당신은 당신의 url 속성은 바인딩 식 내부 값을 얻기 위해 ko.observable 경우 url()를 작성해야합니다.

그러나 더 적절한 솔루션은보기 모델 내부의 이미지 URL을 계산하는 것입니다 그리고 당신은 당신이 <img data-bind="attr: { src: imageUrl }"/>

과 결합 것 imageUrl 속성을 것이다