locked
using images from file in an external component and diplay in store app via data binding

    Question


  • I am using a listView that is data-binded to some text and images. These text and images are stored statically in a js class. So here is my html

    <body>
        <h1>List View with images demo</h1>

        <div id="ItemTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
            <div>
                <img class="imgclass" src="#" data-win-bind="src: image; alt: title" />
                <div>
                    <h1 data-win-bind="innerText: title"></h1>
                </div>
            </div>
        </div>

        <div id="contentGrid">
            <div id="lvCakes"
                 data-win-control="WinJS.UI.ListView"
                 data-win-options="{ itemDataSource : MyImagesCollection.itemList.dataSource, itemTemplate : ItemTemplate }">
            </div>
        </div>

    </body>
    </html>

    and here is the class that contains the text and images.

    (function () {
        "use strict";

        var imgList = new WinJS.Binding.List([
            { title: "BMW", image: "images/image1.jpg" },
            { title: "Ferrari", image: "images/image2.jpg" },
            { title: "Dodge", image: "images/image3.jpg" },
            { title: "Honda", image: "images/image4.jpg" },
            { title: "Toyota", image: "images/image5.jpg" }
        ]);

        var publicMembers =
            {
                itemList: imgList
            };
        WinJS.Namespace.define("MyImagesCollection", publicMembers);

    })();

    What I am looking into doing is to move these statically defined images in the resources to an external component that reads image files and local dynamically. I am not sure what will be best way of doing it. Can I have a portable class reading an image, returning a byte array? Will I still be able to use the data-binding in my html/javascript? Any code samples doing it will help a lot.
    Monday, February 24, 2014 4:01 PM

All replies

  • What's the ultimate goal here? Why do you want them to be dynamic? If you can tell us that, we'll have a better solution for you.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, February 24, 2014 7:40 PM
    Moderator
  • I basically have a search using image app. So user will select an image from her computer, that image will fed to this other component that will perform search on its repository of images based on user supplied image and return matched images. Hopefully it elaborate what I am trying to do.
    Monday, February 24, 2014 9:00 PM
  • Hi Matt/Rob/Any other MSF gurus,

    Any suggestions on my question please?

    Thursday, February 27, 2014 8:36 PM
  • Would moving these files into a database work for you?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, March 06, 2014 2:48 PM
    Moderator