locked
Sending correct data between scripts RRS feed

  • Question

  • I have a data.js file containing a single group of objects that is known publicly throughout my project:

    (function () {
        "use strict"
    
        var groups = [
            { key: "group1", title: "Group1", subtitle: "g1", description: "G1" },
            { key: "group2", title: "Group2", subtitle: "g2", description: "G2" }
        ];
    
        var dataArray = [
            { group: groups[0], fname: "Barry", lname: "Charles", fullname: "Charles Barry", age: "30"},
            { group: groups[1], fname: "Tim", lname: "Sanders", fullname: "Tim Sanders", age: "45" }
        ];
    
        var dataList = new WinJS.Binding.List(dataArray);
    
        //makes the data public to other parts of the app
        var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("DataExample", publicMembers);
    })();

    I have a view of the list showing the fname and lname in a listview.  When I click an item in the listview I want the next page to show the name as well as the age of the item in the group.  I am setting that up as follows in this JS file:

    (function () {
        "use strict";
    
        var page = WinJS.UI.Pages.define("/pages/main/list/list.html", {
    
            ready: function (element, options) {
    
                var listView = element.querySelector('#basicListView').winControl;
                listView.forceLayout();
                listView.oniteminvoked = this.itemInvokedHander.bind(this);
            },
    
            itemInvokedHander: function(eventObject){
                var item = DataExample.itemList.getAt(eventObject.detail.itemIndex);
                WinJS.Navigation.navigate("/pages/main/list/item/item.html", {item: Data.getItemReference(item)});
            }
        });
    })();


    Then I have my JS file that is receiving the information that the above script sent, namely, the item I clicked:

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/main/list/item/item.html", {
            ready: function (element, options) {
                var person = options.item;
                console.log(person);
                displayPersonInfo(person);
            }
        });
    
        function displayPersonInfo(personItem)
        {
            var templateElement = document.getElementById("itemTemplate");
            var targetElement = document.getElementById("element");
            WinJS.Utilities.empty(targetElement);
            templateElement.winControl.render(personItem, targetElement);
        }
    })();

    First of all, the console.log(person); is displaying the key of the group. So if you click the first item the log is "group1," if you click the second item the log is "group2,".  Because the log is changing upon which item I click I assume it is seeing the correct information.  As you can see in the code above, I then call the displayPersonInfo function and pass it person.  It's telling the html to display certain parts of the connected data, but it is just displaying "undefined".

    The html:

    <table>
                    <tbody id="itemTemplate" data-win-control="WinJS.Binding.Template">
                        <tr>
                            <td data-win-bind="innerText: title"></td>
                        </tr>
                        <tr>
                            <th id="Th4" style="width: 170px; height:45px; text-align:left">Age:</th>
                        </tr>
                        <tr>
                            <td data-win-bind="innerText: age"></td>
                        </tr>
                    </tbody>
                </table>
    
                <div id="tableLocation">
                        <table>
                            <thead>
                            </thead>
                            <tbody id="element"></tbody>
                        </table>
                </div>

    Again, the innerText for title and age is displaying as undefined. 

    I'm not sure what's going on or how I can get it to display the information correctly.

    Thanks!


    • Edited by ZachAtttack Wednesday, April 24, 2013 2:28 PM
    Wednesday, April 24, 2013 2:26 PM

Answers

  • what do you mean by "syntax for itemClicked". It is just a variable to store the current selected data.

    Do you hit this method "itemInvokedHander" when you click a item in list?

    I donot know but seems that you have missed setting the data for the list :

    ready: function (element, options) {
    
                var listView = element.querySelector('#basicListView').winControl;
    	listView.itemDatasource = DataExample.itemList.datasource;
                listView.forceLayout();
                listView.oniteminvoked = this.itemInvokedHander.bind(this);
            },
    
    

    - Girija

    • Marked as answer by ZachAtttack Thursday, April 25, 2013 7:15 PM
    Thursday, April 25, 2013 7:05 PM

All replies

  • Can you change this method in list view javascript :

     
    itemInvokedHander: function(eventObject){
                var item = DataExample.itemList.getAt(eventObject.detail.itemIndex);
                WinJS.Navigation.navigate("/pages/main/list/item/item.html", {item: Data.getItemReference(item)});
            }
    


    to

    itemInvokedHander: function(eventObject){
                var itemClicked = DataExample.itemList.getAt(eventObject.detail.itemIndex);
                WinJS.Navigation.navigate("/pages/main/list/item/item.html", {item: itemClicked });
            }
    

    - Girija


    Wednesday, April 24, 2013 7:19 PM
  • I don't know what the syntax is for "itemClicked."

    What I previously had doesn't work, eventObject.detail.itemIndex doesn't work, I did try itemClicked verbatim, but that didn't work either. 

    Thursday, April 25, 2013 1:22 PM
  • what do you mean by "syntax for itemClicked". It is just a variable to store the current selected data.

    Do you hit this method "itemInvokedHander" when you click a item in list?

    I donot know but seems that you have missed setting the data for the list :

    ready: function (element, options) {
    
                var listView = element.querySelector('#basicListView').winControl;
    	listView.itemDatasource = DataExample.itemList.datasource;
                listView.forceLayout();
                listView.oniteminvoked = this.itemInvokedHander.bind(this);
            },
    
    

    - Girija

    • Marked as answer by ZachAtttack Thursday, April 25, 2013 7:15 PM
    Thursday, April 25, 2013 7:05 PM
  • With the syntax, i didn't realize you changed my "var item" to "var itemClicked" so I wasn't sure where you were pulling that from. 

    But this solution above did it, thanks!


    Thursday, April 25, 2013 7:16 PM