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