Question

我想创建一个在事件发生后动态增长的列表（拍摄）我的意思是将每张图片实时添加到列表中，这是我的方法......

//Invoke the camera capture UI for snapping a photo
function imageCapture() {
  ...
                //Creates the array, datalist and the namespace for making this data public
                if (dataArray == null) { dataArray = new Array(); }
                dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };    
                var dataList            = new WinJS.Binding.List(dataArray);
                var publicMembers       = { itemList: dataList };

                WinJS.Namespace.define("DataExample", publicMembers);

}

这是加载内容的HTML页面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>eCamera</title>

    <!-- Referencias de WinJS -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- Referencias de eCamera2 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body >
    <div id="content">
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div style="width: 150px; height: 100px;">
                <!-- Displays the "picture" field. -->
                <img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
                <div>
                    <!-- Displays the "title" field. -->
                    <h4 data-win-bind="innerText: title"></h4>

                    <!-- Displays the "id" field. --> 
                    <h6 data-win-bind="innerText: id"></h6>
                </div>
            </div>
        </div>
        <div id="basicListView" 
            data-win-control="WinJS.UI.ListView"
            data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
                itemTemplate: select('#mediumListIconTextTemplate'), 
                itemsDraggable: true,
                itemsReorderable: true }"></div>
    </div>
</body>
</html>

如果我首先将所有内容加载到固定的dataArray中，那么它的工作非常完美，但是每次我拍照到目前为止，每次添加元素和设置都不起作用，如何让它工作？

提前感谢支持

Answer 1

应用程序不应每次都创建新列表。使用WinJS.Binding.List.push方法追加或拼接可用于插入。由于列表是可观察的，因此UI将对列表的更改（删除/添加）进行自动更新。

如何重新加载WinJS列表

1 个答案: