Skip to content

Commit

Permalink
news
Browse files Browse the repository at this point in the history 
nnnneeeewwwssssssssssss
  • Loading branch information
@Stonebin92
Stonebin92 authored Jan 18, 2017
1 parent f9553bc commit e54d9e7
Showing 1 changed file with 238 additions and 0 deletions.
238 changes: 238 additions & 0 deletions 2017-1-18.index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/knockout-3.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<div id="news">
<!-- 主页面内容 -->
<div data-bind="visible: AttrView() == 0">
<div class="headtap" data-bind="foreach: ListHead">
<div class="left headtap-title" data-bind="click: $root.EventSelHead, css: {'current': $data.UI_sel()}">
<span data-bind="text: $data.Title">新闻</span>
<a href="#" data-bind="visible: !$data.IsFirst, click: $root.EventCloseHead" class="close">x</a>
</div>
</div>
<!-- 新闻标题管理 -->
<div class="head">
<a href="#" data-bind="visible: AttrStatus() == 0, click: EventAddNews">新增新闻</a>
<a href="#" data-bind="visible: AttrStatus() == 2, click: EventEdit">编辑</a>
<a href="#" data-bind="visible: AttrStatus() == 2, click: EventDelete">删除</a>
<a href="#" data-bind="visible: AttrStatus() == 1, click: EventPush">发布新闻</a>
</div>

<!-- 新闻模板 -->
<script type="text/html" id="news-template">
<li class="left">
<div class="right newsimg" data-bind="style: {'background': 'url(' + $data.imgadd +')'}"></div>
<div class="overflow-h">
<a class="title" data-bind="text: title, click: $root.ShowDetails"></a>
<div class="label" >
<span data-bind="text: tags"></span>
</div>
<div class="date">
<span data-bind="text: CreateDate"></span><!-- 时间 -->
<b>跟贴(<span data-bind="text: numbers"></span>)</b><!-- 更贴 -->
<span data-bind="visible: $data.tip == 1" class="theam-tip">专题</span><!-- 专题 -->
</div>
</div>
</li>
</script>

<!-- 列表内容 -->
<div class="news-content" data-bind="visible: AttrStatus() == 1">
<!-- 具体内容 -->
<div class="detail">
<ul data-bind="template: {name: 'news-template', foreach: newsData}, visible: AttrLoading()==0"></ul>
</div>
<div style="clear:both;"></div>
<!-- 加载更多 -->
<div class="text-center" data-bind="" style="clear:both;">
<button type="button" data-bind="click: EventLoadMore, visible: AttrMoreView()" class="addmore">加载更多</button>
</div>
<!-- 内容为空 -->
<div class="news-empty" data-bind="visible: AttrEmptyView()">
<div class="empty-img"></div>
<div class="empty-txt">现在什么也没有</div>
<div class="empty-tips">可以通过"新增新闻"进行添加</div>
</div>
</div>

<!-- 子页面内容 -->
<div data-bind="" class="news-details">
<h3 data-bind="text: newsTitle">标题</h3>
<!-- <div class="detail-head">
<span data-bind="text: nick">昵称</span>
<span data-bind="text: CreateDate">发布日期</span>
<span>跟帖(<b data-bind="text: numbers"></b>)</span>
<span data-bind="visible: $data.tip == 1">专题</span>
</div>
<h4 data-bind="text: content">内容</h4>
<div class="label">
<span data-bind="text: tags">标签</span>
</div> -->
</div>
<!-- <div data-bind="template: {name: 'detail-template-theam', data: newsDetails}" class="news-details"></div> -->

<!-- <script type="text/html" id="detail-template-theam">
<h3 data-bind="text: title">标题</h3>
<div class="detail-head">
<span data-bind="text: nick">昵称</span>
<span data-bind="text: CreateDate">发布日期</span>
<span>跟帖(<b data-bind="text: numbers"></b>)</span>
<span data-bind="visible: $data.tip == 1">专题</span>
</div>
<h4 data-bind="text: content">内容</h4>
<div class="label">
<span data-bind="text: tags">标签</span>
</div>
</script>-->
</div>

</div>

<script type="text/javascript" defer="defer">
var control = $('#news');
function News_Model() {
this.newsTitle = "aaaaaaaaaa";
this.AttrView = ko.observable(0);
this.AttrStatus = ko.observable(1);
this.AttrMoreView = ko.observable(1);
this.AttrEmptyView = ko.observable(1);
this.EventPush = ko.observable(0);
this.EventDelete = ko.observable(0);
this.EventEdit = ko.observable(0);
this.EventLoadMore = ko.observable(0);
this.AttrLoading = ko.observable(false);
this.newsData = ko.observableArray([]);
this.ListHead = ko.observableArray([{
UI_sel: ko.observable(true),
IsFirst: true,
Title: '新闻',
Type: 0
}]);
this.AttrListData = {
skip: 0,
total: 0,
data: ko.observableArray([])
};
var slef = this;
var counter = 0;
var pageStart = 0;
var pageSize = 4;
this.EventSelHead = function (m, e) {
$.each(this.ListHead(), function (k, v) {
v.UI_sel(false);
});
m.UI_sel(true);
this.AttrStatus(m.Type);
}.bind(this);
this.EventCloseHead = function (m, e) {
this.ListHead.remove(m);
var ok = false;
$.each(this.ListHead(), function (k, v) {
if(v.UI_sel) {
ok = true;
}
});
if (!ok) {
this.ListHead()[0].UI_sel(false);
this.AttrStatus(this.ListHead()[0].Type);
}
}.bind(this);
this.EventSwitchHead = function (m, e) {
$.each(this.ListHead(), function (k, v) {
v.UI_sel(false);
})
m.UI_sel(false);
}.bind(this);
this.EventAddNews = function (m, e) {
alert('not ready well');
};
this.EventEdit = function (m, e) {
alert('not ready well');
};
this.EventDelete = function (m, e) {
alert('not ready well');
};
this.EventPush = function (m, e) {
alert('not ready well');
};
this.ShowDetails = function (m, e) {
var newsId = m.id;
slef.getNewsDetails(newsId);
};
this.getNewsDetails = function(newsId) {
$.ajax({
url: "f.json",
type: "get",
// type: "post" 实际开发中使用 POST 发送 News ID 数据到服务器
dataType: "json"
// data: {newsID: newsID} 实际开发中向后台发送 News ID
}).then(function(response) {
var data = response.maindata.contentdata;
var sum = data.length;
$.each(data, function(index, element) {
if(this.id == newsId) {
// console.log(this);
// self.newsDetails = this;
// self.title = this.title;
self.newsTitle = 'asdfdsaf';
alert(123);
// self.newsDetails.title = 'tetset';
// console.log(self.newsDetails.title = 'tetset');
return false;
}
});
})
};
this.FuncGetData = function(pageStart, pageSize) {
$.ajax({
type: 'get',
url: 'f.json',
dataType: 'json'
}).then(function (response) {
var data = response.maindata.contentdata;
var sum = data.length;
if (sum < 0) {
slef.AttrEmptyView(1);
} else {
slef.AttrEmptyView(0);
}
if (sum - pageStart < pageSize) {
pageSize = sum - pageStart;
}
for (var i = pageStart; i < (pageStart + pageSize); i++) {
if (response.success != undefined && response.success == true) {
$.each(data, function(k, v) {
v.imgadd = '';
if (v.image.length > 0) {
v.imgadd = 'img/' + v.image;
}
});
}
// console.log(self.newsData);
slef.newsData.push(data[i]);
}
if ((pageStart + pageSize) >= sum) {
slef.AttrMoreView(0);
} else {
slef.AttrMoreView(1);
}
}, function () {
slef.AttrMoreView(0);
slef.AttrEmptyView(1);
alert('Ajax failed');
})
}
this.EventLoadMore = function () {
counter++;
pageStart = counter * pageSize;
this.FuncGetData(pageStart, pageSize);
}
this.Binding = function (control) {
ko.applyBindings(this, control);
this.FuncGetData(pageStart, pageSize);
}
}

var thenews_model = new News_Model();
thenews_model.Binding(control[0]);
</script>

0 comments on commit e54d9e7

Please sign in to comment.