如何在WinJS listview数据源没有项目时显示消息？

Question

Is there a way to handle the ListView (WinJS) in case of data source has zero items? ie property or a method to show message

Answer 1

I find the easiest thing to do is to just have a span or div containing your message that you only show when the listview has 0 items. This is substantially easier to do when using a binding library like KnockoutJS .

Example (placed directly below your WinJS listview):

<h4 data-bind="visible: (resultDataSource().length === 0)">No Results Found</h4>

Answer 2

Easy to do with the built in WinJS data-binding

<div 
  data-win-control="WinJS.UI.ListView"
  data-win-options="{itemDataSource: app.model.items.dataSource}"
  data-win-bind="style.display: app.model.items app.displayBlockIf"
  ></div>
<div data-win-bind="style.display: app.model.items app.displayBlockIfNot">No items.</div>

In Code:

isSet = function(value) {
  if (!value) {
    return false;
  }
  if (value.length === 0) {
    return false;
  } else {
    return true;
  }
};

WinJS.Namespace.define("app", {
  displayBlockIf: WinJS.Binding.converter(function(value) {
    if isSet(value) then "block" else "none";
  }),

  displayBlockIfNot: WinJS.Binding.converter(function(value) {
    if !isSet(value) then "block" else "none";
  }),

  model: {
    items: new WinJS.Binding.List()
  }

});

Then somewhere in your pages ready() function:

ready: function(element, options) {
  WinJS.Binding.processAll(element, { app: app });
}