Windows商店js应用程序导航控件导致数据绑定问题

Windows store js app navigation control cause data binding problems

本文关键字：数据绑定 问题 控件 导航 商店 js 应用程序 Windows      更新时间：2023-09-26

//file.html

        <div id="RankingTemplate" data-win-control="WinJS.Binding.Template" >
            <h2>
                <span class="Number" data-win-bind="innerText:place"></span>
                <span id="ratingControlDiv"
                      data-win-control="WinJS.UI.Rating"
                      data-win-bind="winControl.averageRating: rating"
                      data-win-options="{maxRating:5,disabled:true}"></span>
                <label for="ratingControlDiv" data-win-bind="innerText : votes"></label>
                <span class="Name" data-win-bind="innerText : title"></span>
            </h2>
        </div>
        <div id="RankingList"
             data-win-control="WinJS.UI.ListView"
             data-win-options="{
                    itemDataSource : sourceData.itemRankingData.dataSource,
                    itemTemplate : RankingTemplate,
                    tapBehavior: 'none',
                    swipeBehavior : 'none',
                    layout: {type: WinJS.UI.ListLayout}
                }"></div>

//file.js

var dataRankingArray = [
    {
        place: 1,
        rating: 4.75,
        votes: "(2500000 votes)",
        title: "Marius"
    },
    {
        place: 2,
        rating: 4.5,
        votes: "(190 votes)",
        title: "Napolis"
    },
    {
        place: 3,
        rating: 3.8,
        votes: "(200 votes)",
        title: "Oliva Restaurant"
    },
    {
        place: 4,
        rating: 3.42,
        votes: "(215 votes)",
        title: "Tucano Coffe"
    },
    {
        place: 5,
        rating: 3.1,
        votes: "(197 votes)",
        title: "Robert's Coffe"
    }
];
var dataRankingList = new WinJS.Binding.List(dataRankingArray);
   var publicMembers =
    {
        itemRankingData: dataRankingList
    };
WinJS.Namespace.define("sourceData", publicMembers);

//屏幕截图

当应用程序加载时，主页看起来像以前的图像，并且一切正常。

之前https://i.stack.imgur.com/G4C3m.jpg

当我尝试使用导航控件从当前页面（主页）导航到同一个页面（首页）时，列表不会加载模板。结果显示在下一张图片中。

之后https://i.stack.imgur.com/CDbtW.jpg

这个问题很可能是因为navigator.js开箱即用不支持同页导航；旧页面在加载新页面之后卸载。两个更容易的修复是：

  • 将页面初始化代码分离为一个单独的函数（例如，将其从ready（）函数中移出），不重新加载页面，只需调用初始化函数即可
  • 使用navigator.js的Win8版本，我认为它有不同的行为

如果你只需要更新你的数据，你可以使用这样的代码，而不是重新加载页面：

var lv = document.getElementById("RankingList");
lv.itemDataSource = sourceData.itemRankingData.dataSource;
相关文章：