Knockoutjs Construye la etiqueta de imagen en foreach de ObervableArray

Question

Estoy devolviendo JSON de un servicio AJAX y vinculando los resultados usando KnockoutJS.

Una de mis enlaces es una imagen, y necesito parte de la URL que provenga del Modelo ViewModel como: https://graph.facebook.com/ ' + FacebookPageID +'/Picture? Type = grande '} "/>

Si copia y pega el resultado de la etiqueta de imagen construida, proporciona una imagen válida de una página de Facebook. Pero cuando se une al atributo SRC, parece quitar los caracteres no alfa-numéricos del camino.

Aquí hay un jsfiddle de mi problema http://jsfiddle.net/8rb8v/1/

Aquí está el 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>

Aquí está el 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);
});

Gracias

Answer 1

Tu marcado no es válido:

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

Es posible que el navegador esté tratando de girar el data-bind Valor de atributo en parte de un nombre de atributo, eliminando así los caracteres no alfanuméricos.

Además, deberías siempre Use comillas en torno a sus valores de atributo:

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