WinJS.UI.ListView自定义列表项内容? [英] WinJS.UI.ListView customize list item content?
问题描述
我正在研究基于Javascript的Windows 8 Metro应用程序。它使用 WinJS.UI.ListView
来显示1列项目列表。我不太了解文档中的内容: http ://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx 。
I'm working on a Javascript based Windows 8 Metro App. It uses WinJS.UI.ListView
to display a 1 column list of items. I don't know much beyond what was said in the documentation: http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx .
如何根据数据源自定义列表项内容?是否有可用的回调函数,因此对于每个列表项,我可以根据数据数组中相应对象的变量显示/隐藏某些HTML标记?
How do I customize the list item content, based on the data source? Is there a callback function available, so that for each list item, I get to show/hide certain HTML tags, based on the variable of the corresponding object in the data array?
与本MSDN文档的示例部分中的排列一样,如何根据 picture $ c显示/隐藏
img
标记$ c>存在?
Like the arrangement in the Examples section of this MSDN documentation, how do I show/hide the img
tag based on whether picture
exists?
除此之外,我如何拥有变量列表项高度?基于上面提到的显示/隐藏功能,我的每个列表项将具有不同的高度(实际上所有项目中只有2个不同的高度)。如何实现这种行为?
On top of that, how do I have variable list item height? Each of my list item will have different height (actually only 2 different heights across all items), based on the show/hide function mentioned above. How to implement this behavior?
谢谢。
推荐答案
中的列表布局WinJS.UI.ListView
不支持不同高度的项目;它必须是一个特定的高度。如果您需要该布局,则必须自己创建。取决于您的数据来源和这个项目的数量要么是微不足道的,要么很难。 :)
The list layout in WinJS.UI.ListView
does not support items of different heights; it has to be one specific height. If you need that layout, you are going to have to create it yourself. Depending on your data source & number of items this is either trivial, or hard. :)
表示:
- The listview does support different templates for each item. The
itemTemplate
property allows you to supply a function. The details are here - The grid layout does support different sized items, based on some properties and calculations. Details here, at the end
如果您有小型数据集(< 50),那么您可以自己动态创建元素,并使用子流的自然流 div
用于一个接一个地堆叠元素。这个解决方案的种子可以在我的答案这里中找到。
If you have small datasets (<50), then you can just dynamically create the elements yourself, and use the natural flow of child div
s to stack your elements one-after the other. The seeds of this solution can be found in my answer here.
让我根据VS中的空白WWA项目扩展示例控件
Let me expand up on the example control, based on a "Blank" WWA Project in VS
添加此项代码到 default.js
:
WinJS.Namespace.define("Samples", {
ItemsControl: WinJS.Class.define(function (element, options) {
this.domElement = element;
WinJS.UI.setOptions(this, options);
}, {
domElement: null,
_dataSource: null,
dataSource: {
get: function () {
return this._dataSource;
},
set: function (v) {
this._dataSource = v;
this._renderItems(v);
}
},
pickTemplate: function (item) {
// The tempalte is found in the WinJS.Binding.Template instances that are
// in default.html. They have ID attributes on them. We're going to pick
// which one we want by setting the ID we're looking for, and then getting
// that element from the DOM and returning the winControl
var templateId = "template1"
if (item.isType2) {
// Because this is "isType2", we're going to use the other template
templateId = "template2";
}
return document.getElementById(templateId).winControl;
},
_renderItems: function (source) {
// This function renders all the items, thus when you set the datasource, and
// expect it to render items, you probably would like all your items to replace
// any existing items.
WinJS.Utilities.empty(this.domElement);
source.forEach(function (item) {
var newElement = document.createElement("div");
this.domElement.appendChild(newElement);
this.pickTemplate(item).render(item, newElement);
}.bind(this));
}
}),
});
function makeContent() {
var data = [
{ label: "First", },
{ label: "Second", },
{ label: "Third", isType2: true },
{ label: "Fourth", isType2: true },
{ label: "Fifth", },
{ label: "Sixth", isType2: true }
];
var control = document.getElementById("itemsControl").winControl;
control.dataSource = data;
}
并替换<$ c $的内容 c> body with:
And replace the content of body
with:
<div data-win-control="WinJS.Binding.Template"
id="template1">
<div class="type1"
data-win-bind="textContent: label"></div>
</div>
<div data-win-control="WinJS.Binding.Template"
id="template2">
<div class="type2"
data-win-bind="textContent: label"></div>
</div>
<button onclick="makeContent()">Make Content</button>
<div id="itemsControl"
data-win-control="Samples.ItemsControl">
</div>
最后,在default.css中:
Finally, in the default.css:
.type1 {
background-color: green;
height: 50px;
width: 100px;
}
.type2 {
background-color: red;
height: 100px;
width: 100px;
}
这篇关于WinJS.UI.ListView自定义列表项内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!