javascript - 一种将元素添加到 ListView 的方法

Question

有没有向 ListView 添加元素的方法？我的目标是在不绑定数据的情况下做到这一点！例如：

     myListView.add("one");
     myListView.add("two");

电子抄送

Answer 1

只需简单地将项目添加到您的初始列表中。如果您有绑定设置，这会自动发生。

html

<div id="simpleBinding" data-win-control="WinJS.UI.ListView"></div>

<div id="simpleBindingTemplate" data-win-control="WinJS.Binding.Template">
    <h3 data-win-bind="innerText:name" />
    <span>Name :</span><span data-win-bind="textContent: name"></span>
    <img data-win-bind="src:imageUrl" />
</div>

Javascript

//Note you could also declare an object type to use here,
//and instantiate them in the list below 
var Person = WinJS.Binding.define({
    name: "",
    birthday: ""
});

//Using the above object
//var people = [
//    new Person({ name: "Bob", birthday: "2/2/2002" }),
//    new Person({ name: "Sally", birthday: "3/3/2003" }),
//    new Person({ name: "Fred", birthday: "2/2/2002" })
//];


//Or simply using JSON
var people = [{ name: 'mary', birthday: '1/1/2010' }, 
              { name: 'fred', birthday: '1/1/2012' }];

//create the binding wrapper
var simpleFriends = new WinJS.Binding.List(people);

//get the ref to your list view
var simpleListView = document.getElementById('simpleBinding').winControl;

//get your template
var simpleTemplate = document.getElementById('simpleBindingTemplate');

simpleListView.itemDataSource = simpleFriends.dataSource;
//can also set in the markup for this element
simpleListView.itemTemplate = simpleTemplate;


//add a new item. the binding update happens automatically
//Could use a Person object we defined
//simpleFriends.push(new Person({ name: "Dynamically added", birthday: "2/2/2002"}));

//or JSON
simpleFriends.push({ name: "Dynamically added", birthday: "2/2/2002"});

要删除项目，您可以使用 pop 或查看这篇文章以获取索引方法 从 WinJS.Binding.List 中删除项目

App Builder for 'Day 10' App Builder上有一些很好的绑定内容