HowTo

#HowTo#

##独自のAjax処理## メニュー画面のLogin FormのLOGIN処理の例を見てみましょう。

$w.handleClickに下記定義が追加されています。

  if name=="loginForm#LoginBtn"
     $w.flux.actions.loginClick(jsx.state.loginForm)
     return

$w.constants =
  $W_LOGIN_SUCCESS: "$W_LOGIN_SUCCESS"

$w.actions = {
  loginClick:(loginForm) ->
    res = $v.validate(loginForm,rules)
    if res.length > 0
      this.dispatch($c.constants.$C_ALERT_SHOW,res)
      return
    this.dispatch($c.constants.$C_LOADING)
    $c.ajaxPostJson("/ajax/loginauth",loginForm,"application/json",
      $c.ajaxCallback.bind(this,loginForm,$w.constants.$W_LOGIN_SUCCESS))

$c.ajaxPostJsonが汎用のAjax通信Functionです。
callback に　$c.ajaxCallbackを指定する事で、Loading表示の終了とエラー時のダイアログ表示が行われます。
正常終了時は、$w.constants.$W_LOGIN_SUCCESSで指定されたFunctionが呼ばれます。
$W_LOGIN_SUCCESSの指定内容は下記の通りです。

    @bindActions $w.constants.$W_LOGIN_SUCCESS

  onLoginSuccess: (res) -> 
    @data.logbtn="LOGOFF"
    @data.uid=res.response.data.uid
    @data.name=res.response.data.name
    @emit "change"
    @emit "loginComplete"
    return

##画面初期化時にDropdownに表示するデータを取得したい## jsxファイルに下記指定をして、起動Functionを指定します。

  componentDidMount: function() {
      $w.flux.actions.getdbs()
  }

getdbsの定義は。

  getdbs:() ->
    params = {
      operationType: "getdbs"
    }
    $c.ajaxPostJson("/ajax/systbl",params,"application/json",
      $c.ajaxCallback.bind(this,params,$w.constants.$W_getdbs_SUCCESS))

$W_getdbs_SUCCESSの実装は。

@bindActions $w.constants.$W_getdbs_SUCCESS, @getdbsSuccess

  getdbsSuccess: (res) -> 
    @data.dbs=res.response.data
    @data.database=[]
    @data.table=[]
    @data.items=[]
    @emit "change"
    return

これで、state.page.dbsに取得したデータが設定されます。 下記の様に使用出来ます。

          <$c.SelectOption options={this.state.page.dbs}