mootoolsで邪魔にならないJavaScript ajax？

Question

jQueryを使用した控えめなJavaScriptはMVC3で利用できますが、どうやってmootoolsで控えめなJavascript ajaxを使用できますか？

Answer 1

ええ、これは簡単です。最近リリースされたhttp://mootools.net/blog/2011/12/20/mootools-behavior/を見て、私はそれをサポートしていると思う。

このアプローチを私のModal.BootStrap（githubのソースを表示）にも使用しました。データ属性を使用してajaxリソースからデータを取得しますが、これは全く同じではありませんが、確かに始まりです。

私はこれを行う10分を費やし、それは良いスタートだ：あなたはその上に構築することができるはず

<form action="/echo/html/" data-ajax="true" data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#update" data-event-success="contactFormSuccess" method="post"> 
    <input name="delay" value="4" type="hidden" /> 
    <input name="html" value="Thanks for your submission, this is the jsfiddle testing response" type="hidden" /> 
    <input name="name" placeholder="your name" /> 
    <button>submit</button> 
</form> 

<div id="update">The update will go here.</div> 
<div id="loading">loading...</div>   

：のDOMと

http://jsfiddle.net/dimitar/zYLtQ/

(function() { 

    var ajaxify = this.ajaxify = new Class({ 

     Implements: [Options,Events], 

     options: { 
      mask: "form[data-ajax=true]", 
      props: { 
       ajaxLoading: "data-ajax-loading", 
       ajaxMode: "data-ajax-mode", 
       ajaxUpdate: "data-ajax-update", 
       ajaxSuccessEvent: "data-event-success" 
      } 
     }, 

     initialize: function(options) { 
      this.setOptions(options); 
      this.elements = document.getElements(this.options.mask); 
      this.attachEvents(); 
     }, 

     attachEvents: function() { 
      this.elements.each(function(form) { 
       var props = {}; 
       Object.each(this.options.props, function(value, key) { 
        props[key] = form.get(value) || ""; 
       }); 

       form.store("props", props); 
       form.addEvent("submit", this.handleSubmit.bind(this)); 
      }, this); 

     }, 

     handleSubmit: function(e) { 
      e && e.stop && e.stop(); 
      var form = e.target, props = form.retrieve("props"), self = this; 
      var updateTarget = document.getElement(props.ajaxUpdate); 

      new Request({ 
       url: form.get("action"), 
       data: form, 
       onRequest: function() { 
        if (props.ajaxLoading) { 
         var loading = document.getElement(props.ajaxLoading); 
         if (loading && updateTarget) { 
          updateTarget.set("html", loading.get("html")); 
         } 

        } 
       }, 
       onSuccess: function() {        
        if (!updateTarget) 
         return; 

        if(props.ajaxMode != 'append') { 
         updateTarget.set("html", this.response.text); 
        } 
        else { 
         updateTarget.adopt(new Element("div", { html: this.response.text })); 
        }  

        if (props.ajaxSuccessEvent) 
         self.fireEvent(props.ajaxSuccessEvent, this.response);  
       } 

      }).send(); 

     } 

    }); 

})(); 


new ajaxify({ 
    onContactFormSuccess: function(responseObj) { 
     console.log(responseObj.text); 
     alert("we are done."); 
    } 
}); 

作品。リファクタリングでは、リクエストイベントを独自のメソッドに移動し、さらにプルーフィングなどを追加しますが、それは問題ありません。私はすべてのMVCを知っているが、欠落しているものの1つは、フォーム検証イベントです。私はまた、あなたのajaxifierインスタンスがそのフォームに特有の何かを行うことができるように起動されたカスタムイベントを追加しました（data-event-success="contactFormSuccess"参照）

また、暗黙指定されていなければ、要求、Request.HTML、Request.JSONなどのイベントonRequest、スピナーなどのようなイベントも可能です...私はあなただけのmvcが提供するオプションを介してあなたの方法を働く必要があり、それらを構築する必要が開始すると思う。

Confirm  data-ajax-confirm 
HttpMethod data-ajax-method 
InsertionMode data-ajax-mode * 
LoadingElementDuration data-ajax-loading-duration ** 
LoadingElementId data-ajax-loading 
OnBegin  data-ajax-begin 
OnComplete data-ajax-complete 
OnFailure data-ajax-failure 
OnSuccess data-ajax-success 
UpdateTargetId data-ajax-update 
Url  data-ajax-url