2015-01-08 3 views
0

그래서 녹아웃을 처음 접했고 도움이 필요한이 문제가 있습니다. 나는 그것이 단순한 것이라고 생각하지만 나는 그것을 알아낼 수 없다. 이 문제는 기본적으로 src를 반환하는 것으로 계산되었습니다. img srcs의 일부에 특정 문자열이 포함되어있는 경우에만이 오버레이가 이미지 위에 표시되어야합니다. 그래서 기본적으로 오버레이 (기본적으로 3)의 보이는 것을 바인딩하려고합니다. 먼저 체크 박스가 선택되어 있는지 확인한 후 계산 된 값을 묻는 것입니다. src에 대해 사용되는 한 번 그 가치에 대해 내가 그것을 반대하는 유효성을 검사 할 문자열을 포함하는 경우 반환 할 수 있고 내가 가진 문제는 문자열의 srs를 반환하는 계산 된 값을 실제로 얻는 것입니다. 그래서 나는 그것을 검증 할 수있다.계산 된 관측 값에서의 가치 얻기

미리 도움을 주셔서 감사 드리며 좋은 하루 되시길 바랍니다 !!

self.model.SelectedImagePath = ko.computed(function() { 
    if (self.model.SelectedImageIndex() > -1 && self.model.SelectedImageIndex() < self.model.ViolationImages().length) { 
     return self.model.ViolationImages()[self.model.SelectedImageIndex()].ImagePath(); 
    } 
    return "../../Content/img/spacer.gif"; 
}); 

//2DOverlay Display Lines 
self.model.ShowOverlayLines = ko.computed(function() { 
    //Validate if image is OV 1 or not to display Overlay Lines 
    //Get the STRING VALUE of SelectedImagePath and Check if() 
    return self.model.SelectedImagePath() && BarsChecked && self.model.ShowOverlayLines; 
}); 
+0

일부 코드는 아마도 ??? – saj

+0

문제가 무엇인지 명확하지 않습니다. 많은 사람들이 귀하의 모델, HTML 및/또는 jsFiddle을 더 게시합니다 –

+0

유일한 문자열은 단순 문자열로 계산 된 SelectedImagePath의 값을 래핑 할 수 있는지 아닌지입니다. –

답변

0

이 방법을 사용하십시오. 첫째로 당신의 HTML에서 데이터 바인딩이 이벤트를 추가 :

<input class=" input-file" id="fileUpload" type="file" data-bind="event: { change: _updateImg}" /> 

다음, 당신의 js 파일의 기능 _updateImg를 작성,이 기능 (태그의 HTML img와 apear 것) 데이터 IMG를 대체 :

function _updateImg(data, event) { 
     var me = this, files, reader; 
     files = event.currentTarget.files; 

     if (files.length > 0) { 
      reader = new FileReader(); 
      reader.onload = function (e) { 
       me.pictureUrl(e.target.result); 
      }; 
      reader.readAsDataURL(files[0]); 
     } 
    }; 

내 bindingHandlers는 (오류 관리) 내 IMG의 URL을 변경

ko.bindingHandlers.img = { 

    // Mise à jour de l'image 
    update: function (element, valueAccessor) { 
     // Données de l'observable 
     var value = ko.utils.unwrapObservable(valueAccessor()), 
      src = ko.utils.unwrapObservable(value.src), 
      fallback = ko.utils.unwrapObservable(value.fallback), 
      $element = $(element); 

     // On set l'url de l'image, si fichier innaccesible alors on set le src à fallback (url par défaut) 
     if (src) { 
      $element.attr("src", src); 
     } else { 
      $element.attr("src", fallback); 
     } 
    }, 

    // Init de l'image 
    init: function (element, valueAccessor) { 
     var $element = $(element); 

     $element.error(function() { 
      var value = ko.utils.unwrapObservable(valueAccessor()), 
       fallback = ko.utils.unwrapObservable(value.fallback); 

      $element.attr("src", fallback); 
     }); 
    } 
}; 

당신의 HTML에 HTML 태그에 :

<img class="img-rounded img-responsive center-block" data-bind="img: { src: pictureUrl, fallback: _pictureDefault }" /> 

내 observbale "pictureUrl"이 (가) 최종 URL입니다. 내가이 img를 결코 바꿀 수 없을 때 내 obseravble pictureDefault가 나의 기본 그림이다. 도움이 필요하면 저에게 물어보십시오.