Question

Context:
Hi,
I am a complete newbie in windows based development. I am building an app for windows 8. I am using the grid app available in visual studio along with javascript, html-5 and css.

Problem:
I want to use external images(from my server ) while displaying a list of objects. But the following binding code does not allow it.

<div class="item">
    <img class="item-image" src="#" data-win-bind="src: image; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" data-win-bind="textContent:kiosk.name"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: title"></h6>
    </div>
</div>

The windows metro apps don’t allow this for security reasons i.e. referencing to external url dynamically.
Is there a work around for this ? Please help I am stuck here completely.

Answer 1

You want to use a data binding converter to prepend the URL prefix to the image value. Refer to http://msdn.microsoft.com/en-us/magazine/jj651576.aspx and search for “converter” on the page for how to do this.