<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
<script>
$(function(){
var people = {
people : ['1','2'],
init : function(){
//初始化节点
this.cacheDom();
//绑定事件
this.bindEvents();
//渲染
this.render();
},
cacheDom : function(){
//找到对应的节点
this.$el = $('#peopleModule');
this.$button = this.$el.find('button');
this.$input = this.$el.find('input');
this.$ul = this.$el.find('ul');
this.template = this.$el.find('#people-template').html();
},
bindEvents : function(){
//bind改变指向问题
this.$button.on('click',this.addPerson.bind(this));
/*$(selector).delegate(childSelector,event,data,function)
返回值: jQuery delegate(selector,[type],[data],fn)
概述
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 */
/*jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );*/
this.$ul.on('click','i.del',this.deletePerson.bind(this));
// this.$ul.delegate('i.del','click',this.deletePerson.bind(this));
},
render : function(){
var data = {
people : this.people
};
this.$ul.html(Mustache.render(this.template,data));
},
addPerson : function(){
//数组里面追加
this.people.push(this.$input.val());
this.render();
this.$input.val('');
},
deletePerson : function(event){
// .closest()
// 从当前元素开始 从父元素开始
// 沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。
var $remove = $(event.target).closest('li');
var i = this.$ul.find('li').index($remove);
this.people.splice(i, 1);
this.render();
}
}
people.init();
})
</script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="peopleModule">
<h1>People</h1>
<input placeholder="name" type="text">
<button id="addPerson">Add Person</button>
<ul id="people">
<script id="people-template" type="text/template">
{{#people}}
<li>
<span>{{.}}</span>
<i class="del">X</i>
</li>
{{/people}}
</script>
</ul>
</div>
</body>
</html>
$(function(){
var people = (function(){
var people = ['will','steve'];
var $el = $('#peopleModule');
var $button = $el.find('button');
var $input = $el.find('input');
var $ul = $el.find('ul');
var template = $el.find('#people-template').html();
console.log(template);
//bings event
$button.on('click',addPerson);
$ul.delegate('i.del','click',deletePerson);
render();
function render(){
$ul.html(Mustache.render(template,{people:people}));
}
function addPerson(value){
var name = (typeof value === "string") ? value : $input.val();
people.push(name);
render();
$input.val('');
}
function deletePerson(event){
var i;
if(typeof event === "number"){
i=event;
}else{
var $remove = $(event.target).closest('li');
var i = $ul.find('li').index($remove);
}
people.splice(i,1);
render();
}
return {
addPerson : addPerson,
deletePerson : deletePerson
}
})();
people.addPerson('111');
people.deletePerson(1);
})
body {
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
.hero-unit {
margin: 20px auto 0 auto;
300px;
font-size: 12px;
font-weight: 200;
line-height: 20px;
background-color: #eee;
border-radius: 6px;
padding: 10px 20px;
}
.hero-unit h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
input {
border: 1px solid #999;
border-radius: 4px;
padding: 10px;
}
button {
zoom: 2;
background-color: #999;
border: 1px solid #999;
border-radius: 4px;
padding: 1px 5px;
}
button.active {
background-color:rgb(165, 227, 158);
}
#peopleModule {
text-align: center;
}
#peopleModule ul {
padding: 0;
}
#peopleModule li {
display: inline-block;
list-style-type: none;
background: #98ec9b;
border-radius: 5px;
padding: 3px 8px;
margin: 5px 0;
200px;
opacity: 0.8;
transition: opacity 0.3s;
}
#peopleModule li:hover {
opacity: 1;
}
#peopleModule li span {
display: inline-block;
160px;
overflow: hidden;
text-overflow: ellipsis;
}
#peopleModule li i {
cursor: pointer;
font-weight: bold;
float: right;
font-style: normal;
background: #666;
padding: 2px 4px;
font-size: 60%;
color: white;
border-radius: 20px;
opacity: 0.7;
transition: opacity 0.3s;
margin-top: 3px;
}
#peopleModule li i:hover {
opacity: 1;
}