vue.js：运用例子

//@ sourceURL=skuLocation.js
var JD = JD || {};

((function($, window) {

    JD.WareList = JD.WareList || {};
    var WareList = JD.WareList;

    WareList.init = WareList.init || {};
    WareList.init = $.extend({
        doInit: function(container) {
            WareList.container = container;
            WareList.container.find('#keyWord').unbind().keydown(function(event) {
                if (event.keyCode == 13) {//按回车
                    WareList.Event.skuLocation();
                }
            });
            WareList.container.find('#loaction').unbind("click").click(function(){
                WareList.Event.skuLocation();
            });
            WareList.init.initWareList();
            WareList.init.initSkuRankList();
            WareList.init.initKeywordHistory();
        },
        getContainer: function() {
            return WareList.container;
        },
        initWareList: function() {
            WareList.init.$recordVM = new Vue({
                el: "#recordTable",
                data: {
                    type: 1,
                    records: []
                },
                methods: {

                }
            });
            WareList.data.fetchData();
        },
        initSkuRankList: function() {
            WareList.init.$recordSkuVM = new Vue({
                el: "#skuRankTable",
                data: {
                    type: 1,
                    skuRank: null,
                    keyWord: null,
                    otherSku: [],
                    flag: false,
                },
                methods: {

                }
            });
        },
        initKeywordHistory:function() {
            WareList.init.$recordKeyVM = new Vue({
                el: "#keywordHistory",
                data: {
                    type: 1,
                    keywordHistory: [],
                    flag: true,
                },
                methods: {

                }
            });
        }
    }, WareList.init);

    WareList.data = WareList.data || {};
    WareList.data = $.extend({
        curr: 1,
        fetchData: function(curr) {
            if (!curr) {
                curr = WareList.data.curr;
            }

            var data = {};
            data.pn = curr || 1;
            data.ps = 20;
            var skuId = $("#skuId").val();

            $.ajax({
                url: "/JDSkuController/searchSkuListData?keyWord="+skuId,
                data: data,
                type: 'get',
                success: function(result) {
                    if (result.success) {
                        WareList.init.$recordVM.records = result.data;
                    } else {
                        alert(result.msg);
                    }
                }
            });

            $.ajax({
                url: "/JDSkuController/KeywordHistoryData",
                data: data,
                type: 'get',
                success: function(result) {
                    if (result.success) {
                        WareList.init.$recordKeyVM.keywordHistory = result.extra.keywordHistory;
                    } else {
                        alert(result.msg);
                    }
                }
            });
        },
        skuRankData: function() {

            var data = {};
            var skuId = $("#skuId").val();
            var keyWord = WareList.container.find('#keyWord').val();

            $.ajax({
                url: "/JDSkuController/skuRankData?skuId="+skuId+"&keyWord="+keyWord,
                data: data,
                type: 'get',

                success: function(result) {
                    if (result.success) {
                        WareList.init.$recordKeyVM.flag = false;
                        WareList.init.$recordSkuVM.flag = true;
                        WareList.init.$recordSkuVM.keyWord = keyWord;
                        WareList.init.$recordSkuVM.skuRank = result.extra.skuRank;
                        WareList.init.$recordSkuVM.otherSku = result.extra.otherSkuList;
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }
    }, WareList.data);

    WareList.Event = WareList.Event || {};
    WareList.Event = $.extend({
        skuLocation: function() {
            WareList.data.skuRankData();
        }

    }, WareList.Event);

})(jQuery, window));