IMG를 사용하는 넉 아웃 모델 src - 새 값을 저장하지 않음

Question

처음으로 녹 아웃을 사용하고 사용자가 이미지 URL이 포함 된 항목 목록을 만들 수 있도록 웹 페이지를 만들려고합니다. 나는 img src 속성을 databind하도록 관리했지만 나중에 jquery 함수로 업데이트하면 knockout 모델을 저장할 때 새로운 src 값이 사용되지 않습니다. 당신은 당신이 모델이 원본 이미지 SRC (test.png)를 취 볼 수있는 저장 버튼을 클릭하면 http://jsfiddle.net/TurUh/4/

- 여기

내 페이지의 단순화 된 버전의 바이올린입니다. 그런 다음 이미지 변경 버튼을 사용하면 이미지 src가 (changed.png)로 업데이트되고, 파이어 버그로 테스트하여 html이 변경되었는지 확인할 수 있습니다. 그런 다음 저장 버튼을 다시 클릭하면 모델에서 이전 src 값 (test.png)을 사용합니다.

내가 잘못 했나요? 누구든지이 문제를 해결하는 방법을 제안 할 수 있습니까?

Answer 1

올바른 길을 가고 있지만 버튼 클릭시 ViewModel을 업데이트하는 대신 코드에서 Knockout 개체를 사용하지 말고 옮겼습니다. 난 당신이 무슨 생각을 참조 제대로 작동하기 위해 여기에 코드를 업데이트 한

: 사람들을위한

http://jsfiddle.net/TurUh/6/

다른이 문제를 다루는는 changeImage 기능은 뷰 모델과 뷰 모델 객체에 넣어 필요가

// Update the whole project array 
self.changeImages = function() { 
    for(var i=0; i < self.projects().length; i++) 
    { 
     self.projects()[i].ImageURL('changed.png'); 
    } 
}; 

ImageURL은 또한 프로젝트 배열 내에서 관찰 가능한 개체를 만들어야한다는 것을 명심하십시오. 오류를 관리하기위한

Answer 2

가장 좋은 방법 :

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); 
     }); 
    } 
}; 

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