Я возвращаю JSON из службы AJAX и привязываю результаты, используя KnockoutJS.
Одним из моих привязок является изображение, и мне нужна часть URL-адреса, которая должна появиться из ViewModel, например: https://graph.facebook.com/'+ facebookPageID +'/picture? Type = large '} "/>
Если вы скопируете и вставляете результат созданного тега изображения, он дает действительное изображение с страницы 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);
});
благодаря
Ваша разметка недействительна:
<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="..." />