szugift-fe/sourcecode/h5app/vue/src/connector/simple-demo.js

/*****
 *
 * Assuming a HTML like
 *
 * <... id="test-app-1">
 *     <... v-for="oneuser in userlist">
 *         {{oneuser.id}} , name: {{oneuser.name}}
 *     </...>
 *
 * </...>
 *
 */
var test_vue_app = new Vue({
    el : "test-app-1",
    data : {
        userlist : [{id:1, name:"hello"}]
    }
});

 /******************************************************************************
 //
 // To load directly from JS(jQuery)
 //
 /*****************************************************************************/

function js_load_something(){
    var uid = 5; //for test.
    BasicFunction.get_data("smartUsers/list"+"?userId="+uid,
        /**
         * 下面的function是访问网络成功后的结果回调，obj 类似
         *
         * http://south.niimei.com:8866/server/smartUsers/list
         * {
         *   "ret":"10000","detail":null,"field":null,"model":
         *   {"page":1,"pageSize":15,"totalPage":1,"totalResult":15,
         *    "list":
         *      [
         *        {
         *       "uid":3,"usn":"cell_13520583918","pss":"64e604787cbf194841e7b68d7cd28786f6c9a0a3ab9f8b0a0e87cb4387ab0107",
         *       "name":"HelloWorld","title":"","priv":"view,order,deliver,pay","state":0,"sess":"iOgxGPkFIV3JxBlBfCv",
         *       "phone":"13520583918","schoolDistrict":null,"userExpPts":null,"userGroup":null,"userVcoin":null,"registerTime":null,
         *       "lastLoginTime":null,"wxUnionid":null,"wxEngineid":null,"wxOpenid":null,"note":null
         *        },
         *        {..第二条数据..},
         *        {..第三条数据..}
         *      ]
         *    }
         * }
         * @param obj
         */
        function (obj) {
            var parsedObj = first_parse(this, obj);
            if(parsedObj != null && parsedObj != undefined) {
                test_vue_app = parsedObj.list;
            } else {
                // error
            }
        } //end of f (obj, status)
    ); // end of get_data
}


/******************************************************************************
 //
 // To load using DataObject + DataService + Module stuff
 //
 *****************************************************************************/

//Module means some component (need only to draw);
var test_vue_module = new Module("nothing", "smartUsers");
test_vue_module.drawData = function (data) {
    test_vue_app.data.userlist.pop();
    for(let i = 0; i < data.len(); i++) {
        test_vue_app.data.userlist.push(data.getSorted(i));
    }
} ;

var loader = new (function(){

    /* this is the main data service that is auto-updating your data*/
    this.userListServ = new DataObjectService("smartUsers", AUTO, "?ext=1");

    // Optional for setting up self-defined interval
    // this.userListServ.autoInterval = 300;
    // this.userListServ.setUpInterval();

    /**
     * load Once, as is.
     */
    this.loadOnce = function(){
        var list = this.userListServ.list;
        test_vue_module.setData(list);
    };

    /***
     * loadOften : to auto-load some data
     */
    this.loadOften = function(){
        // Binding Intervals to DataService
        this.userListServ.bind(function (data) {
            // auto call
            test_vue_module.setData(data);
        });
    };
})();

//To load once
loader.loadOnce();

//To auto-refresh
// loader.loadOften();