Knockout学习，添加模板，事件，Mouseover,mouseout

<div class="rtitle">我的收藏</div>
<div class="list_ul" data-bind="foreach:items">
<dl class="list_c">
<dt class="img"><a target="_blank" href="#" title=""><img data-bind="attr:{src:CoverUrl1}" alt="" /></a></dt>
<dd class="delete"><span data-bind="click:function(event){Delete(FavoriteId)}"><a href="javascript:void(0)" title="删除收藏" class="icon icon-tsina"></a></span></dd>
<dd class="txt">
<h3><a data-bind="attr:{href:StaticPagePath,Title:Title}" title=""><span data-bind="text:Title"></span></a></h3>
<p data-bind="text:Abstract"></p>
<div class="txt_boxb">
<div class="time"><i></i><em data-bind="text:DateAndTimeStr"></em></div>
<div class="browse"><i></i><em data-bind="text:ReadNum"></em></div>
<div class="share" data-bind="event: { mouseover: function(event){ShareInline(event)}, mouseout: function(event){ShareNone(event)}}">
<a class="follow" href="javascript:void(0)" @*data-bind="event: { mouseover: $root.enableDetails, mouseout: $root.disableDetails }"*@ target="_blank" title=""><span data-bind="text:ShareNum"></span></a>
<span class="share-list" style="display:none" @*data-bind="css: { display: $root.DisplayEnabled? 'inline' : 'none' }"*@>
<a href="javascript:void(0)" data-bind="click:function(event){ShareTXQQ(ID)}" title="分享到腾讯QQ" class="icon icon-tqq"></a>
<a href="javascript:void(0)" data-bind="click:function(event){ShareTXZone(ID)}" title="分享到QQ空间" class="icon icon-qzone"></a>
<a href="javascript:void(0)" data-bind="click:function(event){ShareSina(ID)}" title="分享到新浪微博" class="icon icon-tsina"></a>
</span>
</div>
</div>
</dd>
</dl>
</div>
<div class="page" id="pager">
<a class="prev" title="上一页" href="javascript:void(0)" data-bind="click:previous">上一页</a>
<span data-bind="foreach:pageNumbers" id="numList">
<a data-bind="text:num,click:$root.gotoPage,css:{thisclass:index==num }" class="thisclass"></a>
</span>
<a class="next" title="下一页" href="javascript:void(0)" data-bind="click:next">下一页</a>
</div>

 

<script type="text/javascript">

function NewsPage() {
//viewModel本身。用来防止直接使用this的时候作用域混乱
var self = this;
//数据
this.items = ko.observableArray();
//要访问的页码
this.pageIndex = ko.observable(1);
//总计页数
this.pageCount = ko.observable(1);
//页码数
this.pageNumbers = ko.observableArray();
//当前页
this.currengePage = ko.observable(1);
//hover
this.DisplayEnabled = ko.observable(false);

this.refresh = function () {
//限制请求页码在该数据页码范围内
if (self.pageIndex() <= 1)
self.pageIndex(1);
if (self.pageIndex() >= self.pageCount()) {
self.pageIndex(self.pageCount());
}
//post异步加载数据
$.post("/ArticleSystem/Collect_Json", { pageIndex: self.pageIndex(), pageSize: 5 }, function (obj) {
// 加载新的数据前，先移除原先的数据
self.items.removeAll();
self.pageNumbers.removeAll();
self.pageCount(obj.PageTotal);
self.currengePage(obj.PageIndex);
for (var i = 1; i <= obj.PageTotal; i++) {
//装填页码
var p = { num: i, index: obj.PageIndex };
self.pageNumbers.push(p);
}
//for...in 语句用于对数组或者对象的属性进行循环操作。
//for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。
for (var i in obj.Article) {
//装填数据
self.items.push(obj.Article[i]);
}
})
}
//鼠标移入时候
this.enableDetails = function () {
self.DisplayEnabled(true);
}
//鼠标移出时候
this.disableDetails = function () {
self.DisplayEnabled(false);
}
//请求第一页数据
this.first = function () {
self.pageIndex(1);
self.refresh();
}
//请求下一页数据
this.next = function () {
self.pageIndex(self.currengePage()+ 1);
self.refresh();

}
//请求先前一页数据
this.previous = function () {
self.pageIndex(self.currengePage() - 1);
self.refresh();
}
//请求最后一页数据
this.last = function () {
self.pageIndex(this.pageCount() - 1);
self.refresh();
}
//跳转到某页
this.gotoPage = function (data, event) {
self.pageIndex(data.num);
self.refresh();
}
this.refresh();
}
var viewModel = new NewsPage();
ko.applyBindings(viewModel);

//
function ShareInline(event) {
$(".share-list:eq("+event.index+")").css("display", "inline");
}

function ShareNone(event) {
$(".share-list:eq(" + event.index + ")").css("display", "none");
}
function Delete(FavoriteId) {
if (confirm('确定要从收藏中删除这篇文章吗？')) {
$.post("/ArticleSystem/DeleteCollenction", { FavoriteId: FavoriteId }, function (data) {
if (data) {
window.location.href = "/ArticleSystem/Collect";
}
});
}
}