MED ALLIANCE FORM

med alliance 基础form

neofe.config 的 browserify 配置里加入 ["src/libs", "src/path"]

外部依赖文件

require("jquery")

require("ajax")

require("pop/pop.js"); //mod 文件

模版文件 为handlebarsjs

Example 1 Login Form

    var BaseForm = require("med-alliance-form/BaseForm.js");

    var LoginForm = function() {

    }

    LoginForm.prototype = new BaseForm();

    LoginForm.prototype.init = function() {
      BaseForm.prototype.init.apply(this, arguments);
      this.bindModel();
      return this;
    }     


    var loginForm = new LoginForm();

    loginForm.init({
        container : $("#form-container"),
        jv_events : ["blur"],
        jv_success : function() {
          $(this.element).removeClass("error-item");
        },
        jv_fail : function($event, errors) {
          var msg = errors[0].getMessage();
          $(this.element).addClass("error-item");
        },
        submit : function (data) {
          login(data, backurl);
        }
    });

Example 2 BaseInfoForm

    var $ = require("jquery");
    var Observer = require("event");
    var ajax = require("ajax");

    var config = require("./config.js");

    var BaseForm = require("med-alliance-form/BaseForm");

    //Form 插件引入
    var select = require("med-alliance-form/plugin/select.js");
    var upload = require("med-alliance-form/plugin/upload.js");
    var areaSelect = require("med-alliance-form/plugin/areaSelect.js");
    var mapPin = require("med-alliance-form/plugin/mapPin.js");
    var labelCheck = require("med-alliance-form/plugin/labelCheck");
    var customPhone = require("med-alliance-form/plugin/customPhone");
    var busiDate = require("med-alliance-form/plugin/busiDate");


    var form_tpl = require("./tpl/base_info.hbs");
    var Events = require("./observer_events.js");
    var jv = require("./jv");



    var BaseInfoForm = function () {};

    BaseInfoForm.prototype = new BaseForm();

    BaseInfoForm.prototype.STEP = 1;

    BaseInfoForm.prototype.init = function (opts) {
      opts = jv.wrapOpts(opts); 
      opts.submit = function(data) {
        Observer.trigger(Events.STEP_NEXT, me.STEP, data);
      }
      BaseForm.prototype.init.call(this, opts);
      this.initPlugin();
      this.bindModel();
    }

    BaseInfoForm.prototype._bindEvent = function () {
      BaseForm.prototype._bindEvent.apply(this, arguments);
      var me = this;
      var $form = this.$form;
      
      $form.delegate(".js-confirm", "click", function (event) {
        event.preventDefault();
        me.submit();
      });

      $form.delegate(".js-cancel", "click", function (event) {
        event.preventDefault();
        Observer.trigger(Events.STEP_CANCEL);
      });
    }


    BaseInfoForm.prototype.initPlugin = function() {
      var me = this;
      var pr = this._plugin_remove = [];
      var $form = this.getForm();
      var $select = $form.find("[data-role=select]");
      var $upload = $form.find("[data-role=upload]");
      var $mapPin = $form.find("[data-role=mapPin]");
      var $areaSelect = $form.find("[data-role=areaSelect]");
      var $labelCheck = $form.find("[data-role=labelCheck]");
      var $customPhone = $form.find("[data-role=customPhone]");
      var $busiDate = $form.find("[data-role=busiDate]");

      var $section = $form.find(".js-section");
      
      $select.each(function () {
        pr.push(select.init($(this)));
      });
      $areaSelect.each(function () {
        pr.push(areaSelect.init($(this)));
      })

      $mapPin.each(function () {
        var linkElement = this.getAttribute("data-link-element");
        if (linkElement) {
          linkElement = $form.find(linkElement);
        }
        pr.push(mapPin.init($(this), {
          linkElement : linkElement 
        }));
      })

      $labelCheck.each(function () {
        pr.push(labelCheck.init($(this)));
      });

      $upload.each(function() {
        pr.push(upload.init($(this)));
      })

      pr.push(customPhone.init($customPhone));
      pr.push(busiDate.init($busiDate));

      //主刀科室数据 
      
      ajax.get({
        url : "/section/list"
      }).then(function(rs) {
        if (rs.errcode === 0 && rs.data) {
          var $html = $('<div class="check-box">' +
            rs.data.map(function (data) {
              return '<label><input type="checkbox" name="section" value="'+data.id+'" data-model="mainSection" >'+data.name+'</label>';
            })
          +'</div>');
          $section.html($html);
          me.bindSingleModel($html.find("[data-model]"));
        }
      });
    }

    BaseInfoForm.prototype.destroy = function() {
      var pr = this._plugin_remove , l = pr.length;
      for (var i = 0; i < l; i++ ) {
        pr[i]();
      }
      BaseForm.prototype.destroy.apply(this, arguments);
    }


    //针对不同的 type 增加数据存取器
    var ValueParse = BaseInfoForm.prototype._valueParse;

    ValueParse.areaSelect = {
      get : function(item) {
        var elements = item.elements, element = elements[0];
        var getData;
        if (getData = $(element).data("getData")) {
          return getData();
        }
      },
      set : function(item, data) {
        var elements = item.elements, element = elements[0];
        var setData;
        if (setData = $(element).data("setData")) {
          setData(data);
        }
      }
    }

    ValueParse.upload = ValueParse.areaSelect;
    ValueParse.labelCheck = ValueParse.areaSelect;





    module.exports.init = function ($container) {
      var instance = new BaseInfoForm();
      instance.init({
        container : $container,
        form_html : form_tpl({time : config.TIME})
      });
      return instance;
    }