普通列表

<div id="basicList"></div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.widgetConfig({
            basicList: {
                $type: "listView",
                bind: "country in countries",
                textProperty: "label",
                width: 260,
                height: 260
            }
        });
    });
</script>

行模板

利用template子节点，我们可以为列表中的行定义模板，在模板里的HTML里可以使用Cola-UI中所有的DOM指令。

<div id="templateList">
    <template>
        <li><span c-bind="country.label"></span>
            <div c-widget="button; class:red tiny; caption:Remove; click:{{remove(country)}}" style="float:right"></div>
        </li>
    </template>
</div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.action({
            remove: function(country) {
                country.remove();
            }
        });
        model.widgetConfig({
            templateList: {
                $type: "listView",
                bind: "country in countries",
                width: 300,
                height: 300
            }
        });
    });
</script>

选择模板

可以为列表定义多套行模板，每一个行模板有自己的名字。然后再利用getItemTemplate事件来为每一行确定具体要使用的模板。

<div id="chooseTemplateList">
    <template name="odd">
        <li><span c-bind="country.label"></span><span style="float:right">名称长度为奇数</span>
        </li>
    </template>
    <template name="even">
        <li style="background:lightyellow"><span c-bind="country.label"></span><span style="float:right">名称长度为偶数</span>
        </li>
    </template>
</div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.widgetConfig({
            chooseTemplateList: {
                $type: "listView",
                bind: "country in countries",
                width: 300,
                height: 300,
                getItemTemplate: function(arg) {
                    return (arg.item.get("label").length % 2) ? "even" : "odd";
                }
            }
        });
    });
</script>

分组列表

<div id="groupList"></div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.widgetConfig({
            groupList: {
                $type: "listView",
                bind: "country in countries",
                textProperty: "label",
                group: true,
                indexBar: true,
                width: 300,
                height: 600,
                getGroupString: function(arg) {
                    var label = arg.item.get("label");
                    if (label) arg.result = label.charAt(0);
                }
            }
        });
    });
</script>

下拉刷新

此功能仅在移动设备上有效。

<div id="pullActionList">
    <template name="pull-down-pane">
        <div style="height:120px;padding-top:72px">
            <div id="divPullDown" style="line-height:48px"></div>
        </div>
    </template>
</div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.widgetConfig({
            pullActionList: {
                $type: "listView",
                bind: "country in countries",
                textProperty: "label",
                pullDown: true,
                width: 300,
                height: 260,
                pullStep: function(arg) {
                    $("#divPullDown").text((arg.distance < arg.theshold) ? "继续下拉以刷新" : "释放以刷新");
                },
                pullComplete: function(arg) {
                    $("#divPullDown").text("正在刷新...");
                    arg.done();
                }
            }
        });
    });
</script>

条目手势

尝试在某个条目上向左滑动手指（此功能仅在移动设备上有效）。

<div id="itemSlideList">
    <template name="slide-left-pane">
        <div c-onclick="onRemoveClick(country)" style="padding:0 0.75em; color:#fff" class="remove red-background">
            <div style="position:relative; top:50%; line-height:1.5em; margin-top:-0.75em" class="text">Remove</div>
        </div>
    </template>
</div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("countries", {
            provider: "/examples/data/countries.json"
        });
        model.action({
            onRemoveClick: function(country) {
                country.remove();
            }
        });
        model.widgetConfig({
            itemSlideList: {
                $type: "listView",
                bind: "country in countries",
                textProperty: "label",
                itemSlide: "left",
                width: 300,
                height: 260
            }
        });
    });
</script>