Knockoutjs بناء علامة الصورة في foreach من obervablearray

Question

أنا أعيد JSON من خدمة Ajax وأربط النتائج باستخدام KnockoutJs.

واحدة من روابط بلدي هي صورة ، وأنا بحاجة إلى جزء من عنوان URL ليأتي من ViewModel مثل SO: 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);
});

شكرًا

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="..." />