码迷,mamicode.com
首页 > 其他好文 > 详细

利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)

时间:2016-12-02 21:13:39      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:observer   query   condition   控制   height   编译   isp   cookie   利用   

步骤如下:

1、安装依赖:spm install -e

2、编译:spm build

    (编译好的东西会放在trunk-dist里面)

3、发布:spm app -d

(会出来一个export端口,一般是:4745)

4、在浏览器中输入:http://localhost:4745/examples/index.html  即可运行

如果出错了,出bug了,修改完,重新操作2、3、4、三个步骤。

 

for example:

1、组件架构如下:

技术分享

2、代码:package.jon 配置信息(一些依赖):

 "dependencies": {
        "jquery": "<=1.9",
        "backbone": "~1",
        "moment": "~2",
        "observer": "~0",
        "water-model": "~1",
        "lodash": "~3",
        "data-list-panel": "~0",
        "water-setting-panel": "~0",
        "base-conditions-filter": "~1",
        "moment": "~2",
        "jquery-magic-tabs": "~0",
        "common-model": "~0",
        "nunjucks-slim": "~1",
        "jquery-jmp3Player":"~0",
        "jquery-cookie":"~1",
        "excel-export":"~0",
        "store":"~1",
        "grid-table-package":"~0",
        "layer":"~2"
    },

 

技术分享

3、src - sxlcom.js:

//require(‘../css/sxlcom-theme-base.css‘);

var $ = require(‘jquery‘);
var backbone=require(‘backbone‘);
var _ = require(‘lodash‘);
var CommonModel = require(‘common-model‘)

module.exports = backbone.View.extend({

    initialize:function(options){
        this.options=options || {};
        this._initOptions();

    },
    
    _initOptions:function(){
                  //common-model实例化

                  //这是interface_common_model.json里面的接口。
                  var commonModel= new CommonModel(‘basic.data‘);

                  //发起请求
                  commonModel.fetch({
                      waterDetails:{
                           params:{
                               key: ‘select_rain_nodata_list_hn‘
                           }
                      }
                  },function(data){
                      console.log(data);

                  })

// 日期格式:
// [YYYY-MM-DDTHH:mm:ss,YYYY-MM-DDTHH:mm:ss]
// [‘2016-12-01T08:00:00,2016-12-01T22:00:00‘]

             },

    //var commonModel = new CommonModel(‘map.layers‘);

    // commonModel.fetch({
    //     mapLayers: {
    //         params: {
    //             id: area_code,
    //             type: ‘area‘
    //         }
    //     }
    // }, function(data) {
    //     if (!_.isEmpty(data[0].data)) {
    //         that.options.tileMap.setPolyByData(data[0].data[0].data, that._polyConfig || {});
    //     }
    // });


     render:function(){

     },

     dispose:function(){

     }
});

技术分享

4、example - index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script id="seajsnode" src="../sea-modules/sea.js"></script>
<script src="../sea-modules/seajs-helper.js"></script>

<!-- TODO: 其他HTML标记 -->

<script>
    seajs.use([../dist/sxlcom-debug],function(sxlcom){
        //TODO 示例代码
        new sxlcom();
    });
</script>
</body>
</html>

技术分享

 

请求结果:

控制台上打印出一系列  接口的数据。

利用SPM工具运行自己创建的小组件(使用common-model向后台接口请求数据)

标签:observer   query   condition   控制   height   编译   isp   cookie   利用   

原文地址:http://www.cnblogs.com/shenxiaolin/p/6126977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!