locked
Binding a local resource uri to itemcontent in data.js

    Question

  • I am a total JavaScript/WinJS newbie trying to build a Windows Store app with HTML5 using the Grid template.

    In data.js, I want to assign each itemcontent variable an ms-appx value that corresponds to an html file. For example:

    { group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: "ms-appx:///html/test.html", backgroundImage: "ms-appx:///images/test.png" },

    I've tried changing var itemcontent to data:text/html, but that didn't work.

    I've read the help topics on loading files (http://msdn.microsoft.com/en-us/library/windows/apps/hh781229.aspx, for example), but the content is more advanced than I am, so I'm not able to implement it.

    Is there a straightforward way for a newbie to get each instance of itemcontent to accept a local URI as a value, and then display the associated HTML?

    I know I need to use an iframe or WebView control to render the HTML. I just can't figure out how to bind it to a dynamically generated URI.


    • Edited by EuryaleP Sunday, July 20, 2014 7:23 PM
    Sunday, July 20, 2014 6:41 PM

Answers

  • Hi EuryaleP,

    What I modify in head template is:

        <div class="headertemplate" data-win-control="WinJS.Binding.Template">
            <h2 class="group-subtitle" data-win-bind="textContent: subtitle"></h2>
            <img class="group-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <!--<h4 class="group-description" data-win-bind="innerHTML: description"></h4>-->
            <x-ms-webview id="webview" height="300" width="600" data-win-bind="src: description"></x-ms-webview>
        </div>

    And I modify the data.js, I change groupDescription as "ms-appx-web://page.html"

    Then it should work.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by EuryaleP Tuesday, July 22, 2014 11:43 PM
    Tuesday, July 22, 2014 9:54 AM
    Moderator

All replies

  • Hi EuryaleP,

    I don't know what do you mean by changing var itemcontent to data: text/html, but that did not work. Could you explain more to me?

    Let's say if I have the uri string, I can navigate to another page by using x-ms-webview navigate method, this method accept string as uri, once you read the data from data.js, you could navigate your target page, tell me if I misunderstand something.

        <script>
            function doclick() {
                var webveiw = document.getElementById("webview");
                webveiw.navigate("ms-appx-web:///page.html");
            }
        </script>
        <button onclick="doclick()">click me</button>
        <x-ms-webview id="webview" height="600" width="600"> </x-ms-webview>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, July 21, 2014 9:44 AM
    Moderator
  • Thank you, James.

    I want to use data.js to store my information.

    I got the idea of using a data uri (data:text/html) from the image resources in data.js.

    For example, in data.js, the variables darkgray, mediumgray, and lightgray begin like this: 

    "data:image/png;base64"

    I noticed that if I changed darkGray in the follow code to a uri, I could reference my own image using ms-appx, and use a different image for each item in the group.

    {group:sampleGroups[1],title:"Item Title: 1",subtitle:"Item Subtitle: 1",description:itemDescription,content:itemContent,backgroundImage:darkGray },

    After reading about data uris, I thought if I changed the value of the variable  itemcontent to a data uri, I could reference an ms-appx location for each instance of

    content: itemcontent

    That, however, didn't work.

    Just like changing

    backgroundImage: darkGray 

    to

    backgroundImage: "ms-appx:///images/customImage.png"

    I want to be able to change

    content: itemcontent 

    to

    content: "ms-appx:///text/customtext.html"

    And so when I navigate from an item in groupedItems.html to itemDetail.html, I get the text from ms-appx:///text/customtext.html.

    Right now, the ms-appx:/// value is read as a string, even if I use a webview.

    Monday, July 21, 2014 6:10 PM
  • Hi EuryaleP,

    What I modify in head template is:

        <div class="headertemplate" data-win-control="WinJS.Binding.Template">
            <h2 class="group-subtitle" data-win-bind="textContent: subtitle"></h2>
            <img class="group-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <!--<h4 class="group-description" data-win-bind="innerHTML: description"></h4>-->
            <x-ms-webview id="webview" height="300" width="600" data-win-bind="src: description"></x-ms-webview>
        </div>

    And I modify the data.js, I change groupDescription as "ms-appx-web://page.html"

    Then it should work.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by EuryaleP Tuesday, July 22, 2014 11:43 PM
    Tuesday, July 22, 2014 9:54 AM
    Moderator
  • That's exactly the tip I needed, James! Thank you!
    Tuesday, July 22, 2014 11:44 PM