Knockoutjs는 obervablearray의 foreach에 이미지 태그를 구성합니다

Question

Ajax 서비스에서 JSON을 반환하고 Knockoutjs를 사용하여 결과를 바인딩합니다.

내 바인딩 중 하나는 이미지이며, viewmodel에서와 같은 URL의 일부가 필요합니다.

구성된 이미지 태그의 결과를 복사하여 붙여 넣으면 Facebook 페이지에서 유효한 이미지를 제공합니다. 그러나 SRC 속성에 바인딩되면 경로에서 알파 수문 문자를 제거하는 것으로 보입니다.

여기 내 문제의 JSFiddle이 있습니다 http://jsfiddle.net/8rb8v/1/

HTML은 다음과 같습니다.

<h1>Events</h1>
<button id="btnSearch">Click to Search</button>
<div class="myresult" data-bind="foreach: events">
    <div>
        Name: <span data-bind="html: Name"></span><br/>
        facebookPageID: <span data-bind="html: facebookPageID"></span><br/>
        Constructed Image Tag: <span data-bind="html: 'https://graph.facebook.com/' + facebookPageID + '/picture?type=large'"></span><br/>
        <img width=100 height=100 border=1 data-bind "attr:{ src: 'https://graph.facebook.com/' + facebookPageID + '/picture?type=large' }" />
    </div>
</div>

코드는 다음과 같습니다.

var jsonData = {
        "events": [{
            "Name": "London marathon",
            "facebookPageID": "71506449747"
        }, {
            "Name": "Great North Run",
            "facebookPageID": "71506449747"
        }]
    };

// View model declaration
var EvViewModel = {
    events: ko.observableArray([])
};

function getEvents() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/echo/json/',
        data: { json: JSON.stringify(jsonData) },
        success: function (data) {
            EvViewModel.events(data.events);
            $("myresult").fadeIn();
        },
    });
}

$(document).ready(function () {
    $('#btnSearch').click(getEvents);
    ko.applyBindings(EvViewModel);
});

감사

Answer 1

마크 업은 유효하지 않습니다.

<img width=100 height=100 border=1 data-bind "attr:{ src:
                                            ^
                                            missing an equals sign

브라우저가 data-bind 속성 값은 속성 이름의 일부로 값을 얻으므로 비 성자 문자를 제거합니다.

또한, 당신은해야합니다 언제나 속성 값 주위에 따옴표를 사용하십시오.

<img width="100" height="100" border="1" data-bind="..." />