2

我想在 Windows 8 RT（来自 BUILD 2011 的开发人员预览版）（使用 JavaScript）中的 ListView 中使用一个可观察的对象。

下面的代码似乎应该可以工作。它有一个简单的模板，用于在 HTML 中显示每个对象的标题和描述，以及 WinJS.UI.Listview 组件的基本使用。

我希望看到一个对象列表，但是当列表包含observables时，总是会看到“等待微调器” 。

在实验中，我注意到如果代码没有将整个列表（除了 3 个）转换为可观察对象，那么列表就会显示出来。从进行一些调试来看，它似乎与时间有关，并且 WinJS 框架计算错误并且无法完全呈现 ListView（因为某些对象“待处理”）由于某种原因（错误计算混乱发生在调用ScrollView 代码中的实现项）。如果我注释掉enableFirstChanceException函数调用，它会在比较函数 itemChanged 中的两个对象（但我不知道它是否相关）时失败（不支持值参数中的循环引用）。

关于如何使用可观察对象进行这项工作的任何想法？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024, height=768" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script type="text/javascript" src="/WinJS/js/base.js"></script>
    <script type="text/javascript" src="/WinJS/js/ui.js"></script>
    <script type="text/javascript" src="/WinJS/js/binding.js"></script>
    <script type="text/javascript" src="/WinJS/js/controls.js"></script>
    <script type="text/javascript" src="/WinJS/js/res.js"></script>
    <script type="text/javascript" src="/WinJS/js/animations.js"></script>
    <script type="text/javascript" src="/WinJS/js/uicollections.js"></script>
    <script type="text/javascript" src="/WinJS/js/wwaapp.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="itemTemplate" data-win-control="WinJS.Binding.Template" >
        <div class="itemContainer">

            <!-- Displays the "title" field. -->
            <div class="itemTitle" data-win-bind="innerText: title">
            </div>

            <!-- Displays the "description" field.  -->
            <div class="itemDescription" data-win-bind="innerText: description">
            </div>

        </div>
    </div>

    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixed-layout">
            <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemRenderer: itemTemplate}">
            </div>
        </div>
    </div>
</body>
</html>

和 JavaScript：

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    //Debug.enableFirstChanceException(true);

    var myData = [
    { title: "Banana", description: "Banana Frozen Yogurt"},
    { title: "Orange", description: "Orange Sherbet"},
    { title: "Vanilla", description: "Vanilla Ice Cream"},
    { title: "Mint", description: "Mint Gelato"},
    { title: "Strawberry", description: "Strawberry Sorbet"},
    { title: "Kiwi", description: "Kiwi Sorbet" }
    ];

    // this works:
    //var myDataSource = new WinJS.UI.ArrayDataSource(myData);

    // this does not:
    for (var i = 0; i < myData.length ; i++) {
        myData[i] = WinJS.Binding.as(myData[i]);
    }
    var myDataSource = new WinJS.UI.ArrayDataSource(myData);

    document.addEventListener("DOMContentLoaded", function (e) {
        WinJS.UI.processAll()
            .then(function () {
                var basicListView = WinJS.UI.getControl(document.getElementById("basicListView"));
                basicListView.dataSource = myDataSource;

            // when the observable works correctly, this should work (and live change the list)
            //setTimeout(function () {
            //    basicListView.refresh();
            //    myData[0].title = "Yellow Banana";
            //    myData[5].title = "Kiwisicle";
            //}, 3000);
        });
    });
    WinJS.Application.start();
})();
4

0 回答 0