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";
}
});
}
}