vue.js 利用SocketCluster实现动态添加数据及排序
直接上代码
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="../折叠菜单插件/3/js/jquery.min.js"></script>
<script src="js/socketcluster.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--<ul id="example-1">-->
<!--<li v-for="item in items">-->
<!--{{ item.type }}-->
<!--</li>-->
<!--</ul>-->
<div style="position:fixed; top:0px;left: 0px;" >
<ul id="example-1">
<li class="block" v-for="data in items | orderBy 'count' -1" >
<input type="checkbox" name="item" id="{{ data.type }}" checked="checked" />
<label for="{{ data.type }}"><i aria-hidden="true" class="icon-users"></i> {{ data.type }} <span>{{ data.count }}</span></label>
<ul class="options">
<li v-for="s_data in data.small_type| orderBy 'count' -1">
<a href="#">
<i aria-hidden="true" class="icon-search"></i> {{ data.type }}——{{s_data.count}}
</a>
</li>
<!--<li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>-->
<!--<li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>-->
</ul>
</li>
</ul>
</div>
</body>
</html>
/**
* Created by Administrator on 2016/11/4.
*/
$(function () {
var socket = socketCluster.connect( {
port: 8000,
hostname: "193.168.15.205",
// path: '/public',
secure: false
});
var sub = socket.subscribe('attack_data');
var datas=[];
sub.watch(function (data) {
var $type=JSON.parse(data).data.type;
console.log($type);
var $is_cunzai=false;
for(var i=0;i<datas.length;i++){
var model=datas[i];
if(model.type==$type){
datas.splice(i,1,{
type:$type,
count:model.count+1,
small_type:[{
type:"测试分类1",
count:30+model.count+1,
},{
type:"测试分类2",
count:50+model.count+1,
},{
type:"测试分类3",
count:90+model.count+1,
}
]
});
$is_cunzai=true;
break;
}
}
if(!$is_cunzai){
datas.push({
type:$type,
count:1,
small_type:[{
type:"测试分类1",
count:30,
},{
type:"测试分类2",
count:50,
},{
type:"测试分类3",
count:90,
}
]
});
}
});
var example1 = new Vue({
el: '#example-1',
data: {
items: datas
}
});
});
