Lift：AJAXデータ読み込みの簡単な例

Liftは、Webアプリケーションを作成し、いくつかの問題を解決するための非標準のアプローチを提供するための最新のScala言語フレームワークです。 この記事では、AJAXリクエストを使用してサーバーからデータをロードする（前の）最も単純な例を検討します。 この投稿は、誰かにとって有用であり、解決策を見つけるのにかかる時間を1、2時間短縮し、単に優れた現代の、しかしまだあまり人気のないフレームワークの機能のデモンストレーションとして使用できることを期待して書かれました。 しかし、私は読者がLiftについての基本的なアイデアとLiftが使用するいくつかの概念をすでに持っていると思います。





例として、「コメント」を表示するアプリケーションを考えてみましょう-最初の5ページをロードし、残りをロードする場合-もちろん、ページをリロードすることなく、5つの「部分」でオンデマンドでロードします。



それでは始めましょう。 単一のコメントを表すPostモデルを作成しましょう：

class Post extends LongKeyedMapper[Post] with IdPK { def getSingleton = Post object title extends MappedText(this) object text extends MappedText(this) object date extends MappedDate(this) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

および対応するコンパニオンオブジェクト：

 object Post extends Post with LongKeyedMetaMapper[Post] { def getPosts(startAt: Int, count: Int) = { Post.findAll(OrderBy(Post.date, Descending), StartAt(startAt), MaxRows(count)) } def getPostsCount = Post.count }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つの関数が既に宣言されています-オブジェクトの総数を取得し、コメントのカスタム範囲を取得します。 私たちの場合、これらのメソッドなしで「インプレース」でクエリを作成することができました-スニペットコードで直接、しかし、これはテストを複雑にし、コードをオーバーロードします。



次に、コメントの初期表示を行う必要があります。 これを行うには、次のスニペットを作成します。

 class PostRender { def renderPosts(in: NodeSeq): NodeSeq = { Post.getPosts(0, 5).flatMap(item => bind("post", in, "title" -> Text(item.title), "text" -> Text(item.text) )) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして/templates/__post.htmlにある対応する埋め込みテンプレート （はい、Sala/ Lifftでもアンダースコアが必要な場合があります）：

 <lift:PostRender.renderPosts> <p> Title: <post:title /> <br /> <post:text /> </p> </lift:PostRender.renderPosts>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、次のようにして目的のページに接続します。

 <div id="posts"> <lift:embed what="/templates/__post" /> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、スペシャルに基づいた「古い」テンプレートマークアップを使用していることに注意してください。 xml-tags。この場合、これは私にとってより便利で視覚的です。



その結果、データベーススキーマにモデルを追加した後、レコードに入力するなどすると、次のようになります。



必要に応じて、5つのオブジェクトのみ。 次に、残りのコメントの読み込みを整理する必要があります。

AJAXダウンロード

続行する前に、JsCmdについて少し説明する価値があります。実際、Liftのサブシステムは、サーバー側でクライアント側のJavaScriptをスニペットコードで生成し、応答に挿入するように設計されています。 JSコードをインジェクトするにはさまざまな方法があります-JsRawメソッド（生のJSを埋め込むことができます）から、JSフレームワークのプロキシメソッドへ。 まず、JSCmdはJSコードの小さな部分を実装するように設計されています。



追加のオブジェクトをロードするためのボタンを表示するスニペット呼び出しを追加して、コメントの挿入を変更します。

 <div id="posts"> <lift:embed what="/templates/__post" /> </div> <lift:PostRender.renderLoadMoreControl />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

およびスニペットクラス：

 class PostRender { val loadSize = 5 val lastLoadIndex = Post.getPostsCount - loadSize var loadStartIndex = 0 def renderPosts(in: NodeSeq): NodeSeq = { Post.getPosts(loadStartIndex, loadSize).flatMap(item => bind("post", in, "title" -> Text(item.title), "text" -> Text(item.text) )) } def renderLoadMoreControl: NodeSeq = { def loadPosts: JsCmd = { loadStartIndex += loadSize JqJsCmds.AppendHtml("posts", <lift:embed what="/templates/__post" />) & { if (lastLoadIndex < loadStartIndex) JsCmds.Replace("loadButton", NodeSeq.Empty) } } SHtml.ajaxButton("Load More", loadPosts _, "id" -> "loadButton") } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ロードされた「ページ」をコメントで表すために値がクラスに導入されました-renderPostsメソッドは初期値を使用して最初の5エントリを表示し、新しいrenderLoadMoreControlメソッドはコメントの次の「部分」をロードしてそれをloadPosts内部関数に関連付ける新しいボタンを追加します、これはAJAX応答の実装です。 もっと詳しく考えてみましょう。



まず、ロードするレコードのインデックスのインデックスをインクリメントします-これは明らかです。 次に、 net.liftweb.http.js.jquery.JqJsCmdsパッケージからAppendHtmlメソッドを呼び出します。これは、jQueryライブラリ関数（Liftにデフォルトで組み込まれています）のラッパーを提供します。 AppendHtmlは、DOMツリーオブジェクトのIDとNodeSeq型のオブジェクトの2つのパラメーターを取ります。実際には、追加されるコードです。 コメントテンプレートが別のファイルに移動した理由が明らかになったと思います。AJAX応答としてAppendHtmlメソッドに渡すことができ、さらに、このテンプレートはrenderPostsメソッドを使用して処理されます。 JsCmdタイプを返す関数は、 ＆メソッドを使用して連結できます。この場合、最後の「ページ」に到達すると、コメントをロードするためのボタンが非表示になります。 実際には、すべて、すべてのコード:)



クライアント側では、ボタンは次のコードのようなものに変わります。

 <button onclick="liftAjax.lift_ajaxHandler("F167386167581RGRLAG=true", null, null, null); return false;" id="loadButton">Load More</button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

、応答コードには次のようなjQueryコマンドが含まれます。

 jQuery('#'+"posts").append("\u000a <p>\u000a Title: Post #11 ... ");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結論として

もちろん、上記の例はやや人工的ですが、Liftの機能の一部を示すことができます：AJAX要求を作成するための組み込みツール、クライアント側のJavaScriptを作成するためのラッパーとプロキシメソッド、エンドツーエンドのテンプレート処理。 また、明らかに、クライアントJSコードはまったく作成されませんでした。これはすべてフレームワークによって行われますが、それを超えてこの例を超えませんでした。 ただし、これが唯一のアプローチではなく、必要に応じて「手動制御」に障害はありません。 アプリケーションコードはここで入手できます （Mavenで使用）。