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

时间:2013-04-16 12:57:49

标签: javascript windows-store-apps

是否有方法将元素添加到ListView?我的目标是在没有绑定数据的情况下这样做!例如:

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

ECC

1 个答案:

答案 0 :(得分: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或查看此帖子以获取索引方法 Removing an item from a WinJS.Binding.List

App Builder上的“第10天”App Builder

有一些很好的绑定内容