Knockoutjs Construa a tag de imagem em foreach of obervableArray

Question

Estou devolvendo o JSON de um serviço Ajax e vinculando os resultados usando knockoutjs.

Uma das minhas ligações é uma imagem, e eu preciso de parte do URL para vir do ViewModel como assim: https://graph.facebook.com/ ' + FacebookPageId +'/Picture? Type = Large '} "/>

Se você copiar e colar o resultado da tag de imagem construída, ela fornecerá uma imagem válida de uma página do Facebook. Mas quando vinculado ao atributo SRC, parece desmaiar caracteres não alfa-numéricos do caminho.

Aqui está um jsfiddle do meu problema http://jsfiddle.net/8rb8v/1/

Aqui está o 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>

Aqui está o código:

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

Obrigado

Answer 1

Sua marcação é inválida:

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

Pode ser possível que o navegador esteja tentando virar o data-bind Valor do atributo em parte de um nome de atributo, retirando assim os caracteres não alfanuméricos.

Além disso, você deveria sempre Use as aspas em torno dos valores dos atributos:

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