녹아웃 이미지 작성 src

다음 코드가 있으며 이미지의 src를 구성하는 데 문제가 있습니다.녹아웃 이미지 작성 src

문제는 src에서 위도와 경도 매개 변수에 액세스하는 것입니다. 위의 원인으로 인해 인쇄 할 수 있습니다.

<div data-bind='foreach: posts'> 
      <div class="well"> 
       <div class="row"> 
        <div class="col-xs-12 col-md-12"><h4><span data-bind='text: Name'></span></h4></div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12 col-md-8"> 
         <div class="row"> 
          <div class="col-xs-12 col-md-2"><b>Address:</b></div> 
          <div class="col-xs-12 col-md-10"><span data-bind='text: Address'></span></div> 
         </div> 
        </div> 
        <div class="col-xs-12 col-md-4"> 
         Longitude: <span data-bind='text: Longitude'></span> - Latitude: <span data-bind='text: Latitude'></span> 
         <img data-bind="attr: {'src': 'http://maps.googleapis.com/maps/api/staticmap?center='+ Latitude+','+ Longitude+'&zoom=13&size=300x300&maptype=roadmap&markers=color:red%7C'+ Latitude+','+ Longitude}" /> 
        </div> 
       </div> 
      </div> 
     </div>

출처

2014-05-16 Niko Dierickx

가 괜찮은 설명하는 좋은 방법을 찾을 수 없습니다,하지만 당신은 당신이 건물에 사용하는 각각의 관찰에') ('추가해야 할 것 observables는 함수이므로 소스 url. 이렇게하면'data-bind = "text : Longitude"', knockoutjs는 스스로 관찰 할 수있는 'data-bind = "텍스트를 처리 할 수 있습니다 : Longitude +'aribtrary text '"' . –

행운없이 제안한 것을 시도했습니다. –

[잘 작동합니다 (http://jsfiddle.net/7cCZG/)]이기 때문에 질문을 viewmodel 코드로 업데이트해야합니다. 그래서 concertating 때 obserfables에 '()'를 사용하면 문제가되는 것일 수도 있습니다. –

보기에서 계산을 피하십시오. 이것이 관측 된 관측 값의 의미입니다. 예를 들어

function PostViewModel() { 
    var self = this; 

    self.Name = ko.observable(''); 
    self.Address = ko.observable(''); 
    self.Latitude = ko.observable('foo'); 
    self.Longitude = ko.observable('bar'); 

    self.MapImgSrc = ko.computed(function() { 
     var la = encodeURIComponent(ko.unwrap(self.Latitude)), 
      lo = encodeURIComponent(ko.unwrap(self.Longitude)); 

     return 'http://maps.googleapis.com/maps/api/staticmap?center=' + 
       la + ',' + lo + 
       '&zoom=13&size=300x300&maptype=roadmap&markers=color:red%7C' + 
       la + ',' + lo; 
    }); 
}

및

<div data-bind='foreach: posts'> 
    <div class="well"> 
     <div class="row"> 
      <div class="col-xs-12 col-md-12"><h4><span data-bind='text: Name'></span></h4></div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 col-md-8"> 
       <div class="row"> 
        <div class="col-xs-12 col-md-2"><b>Address:</b></div> 
        <div class="col-xs-12 col-md-10"><span data-bind='text: Address'></span></div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-md-4"> 
       Longitude: <span data-bind='text: Longitude'></span> - 
       Latitude: <span data-bind='text: Latitude'></span> 
       <img data-bind="attr: {src: MapImgSrc}" /> 
      </div> 
     </div> 
    </div> 
</div>

출처

2014-05-16 15:23:29 Tomalak

녹아웃 이미지 작성 src

답변

관련 문제