【问题标题】:play 2.0 template the right way to reuse footer templateplay 2.0模板重用footer模板的正确方法
【发布时间】:2012-08-21 18:48:04
【问题描述】:

我有一个页脚模板,其中包含输入并提交电子邮件订阅。每个页面都使用页脚。订阅成功后,将重定向回当前页面。但是,我发现我正在传递一个字符串值来指示当前页面是什么。为 Play 2.0 应用程序提供页脚模板的最佳方式是什么?

footer.scala.html

@(page: String)
<div id="footer">
    <div class="input-append">
        <form action="@routes.ApplicationController.saveSubscription(page)"
                                method="post">
        <input type="text" name="emailAddress" placeholder="Your Email" />
        <input class="btn" type="submit" value="Subscribe" />
        </form>
    </div> <!-- /input-append -->  
</div> <!-- /footer -->

ApplicationController.java

public class ApplicationController extends Controller {
    public static Result saveSubscription(String page) {
        ..........
        flash("success", "success message");
        if (page.equals("page1")) {
            return redirect(routes.ApplicationController.page1());
        } else if (page.equals("page2")) {
            return redirect(routes.ApplicationController.page2());
        } 
    }
}

page1.scala.html

@main("Page 1") {
    <div>
    <p>page 1</p>
    </div>
    @footer("page1")
}

page2.scala.html

@main("Page 2") {
    <div>
    <p>page 2</p>
    </div>
    @footer("page2")
}

编辑 1

我关注@virtualeyes,但似乎从未调用过 subscribe.js。这是新设置。

ma​​in.scala.html

<html>
    <head>
        <script type="text/javascript" src="@routes.Assets.at("javascripts/jquery.min.js")"></script>
    <script type="text/javascript" src="@routes.Assets.at("javascripts/vendor/jquery.validate.min.js")"></script>
    <script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/subscribe.js")" type="text/javascript"></script>

    </head>
    <body>
       @footer()
    </body>
</html>

footer.scala.html

<div id="footer">
    <div class="input-append">                  
      <form id="_form" action="@routes.ApplicationController.simpleSubscription()">
        <input type="text" name="emailAddress" placeholder="Your Email" />
        <input id="_process" class="btn" type="submit" value="Subscribe" />
      </form>
    </div> <!-- /input-append -->  
</div> <!-- /footer -->

路线

POST    /subscribe  controllers.ApplicationController.simpleSubscription()

现在我得到了他的错误: 未找到操作 对于请求 'GET /subscribe?emailAddress=fdsaf%40rte.com'

我不确定是不是因为 method="post" 被删除了。如果我把它放回去,那么结果会返回,但会重定向到 /subscribe 页面。我还在 subscribe.js 设置了一个断点,但它似乎根本没有被调用。

编辑 2 - 工作

在我对 subscribe.coffee 进行了一些更改并摆脱了 main.coffee 之后,现在它可以工作了。

subscribe.coffee

$('#_process').click (e) ->
  e.preventDefault()

  isValid = $('#_form').validate().form()
  if isValid
    $('#_process').spin()
    $.ajax
      type: "POST"
      url:  $('#_form').attr('action')
      data: $('#_form').serialize()
      success: (data) ->
        $('#_status > div').removeClass('alert-error').addClass('alert-success')
        $('#_status > div').html( data )
        $('#_status').fadeIn()
        fade = () -> $('#_status').fadeOut('slow')
        setTimeout fade, 2000
        $('#_process').spin('stop')

      error: (data) ->
        $('#_status > div').removeClass('alert-success').addClass('alert-error')
        $('#_status > div').html( data.responseText )
        $('#_status').fadeIn()
        fade = () -> $('#_status').fadeOut('slow')
        setTimeout fade, 2000
        $('#_process').spin('stop')

      complete: () -> $('#_process').spin('stop')

footer.scala.html

 <div id="_status">
    <div class="alert alert-error"></div>
 </div>
 <div class="input-append">
    <form id="_form" action="@routes.ApplicationController.simpleSubscription">
       <input type="text" name="emailAddress" placeholder="Your Email" />
       <input id="_process" class="btn" type="submit" value="Subscribe" />
    </form>
    <div id="_spin"></div>
  </div> <!-- /input-append -->

spin() 函数来自https://github.com/pshizzle/spin.coffee

【问题讨论】:

    标签: java playframework-2.0


    【解决方案1】:

    AJAX 是一种方式™

    //footer.scala.html
    <div id="footer">
      <div class="input-append">
        <form id="_form" action="@routes.ApplicationController.saveSubscription">
          <input type="text" name="emailAddress" placeholder="Your Email" />
          <input id="_process" class="btn" type="submit" value="Subscribe" />
          <img id="spinner" src="/assets/img/loader.gif" alt="loading..." />
        </form>
      </div>
    </div>
    
    <div id="status">
      <div class="alert alert-error"></div>
    </div>
    <style type="text/css">
      #spinner, #status { display: none; }
    </style>
    
    //ApplicationController.java
    public class ApplicationController extends Controller {
      public static Result saveSubscription() {
        // save subscription
        ...
        // pseudo code
        if(success) 
          Ok( i18n("subscription success").toJson() );
        else
          Conflict( i18n("subscription fail").toJson() );
      }
    }
    
    //main.coffee
    jQuery ->
      $.ajaxSetup
        type:     "POST"
        cache:    false
        dataType: "json"
    
      # prevent form submit on keypress
      $('form').find('input').keypress (e) -> e.preventDefault() if(e.which == 13)
    
      jParse = (data) -> 
        try jQuery.parseJSON(data)
        catch e
          data
    
      jText = (data) -> jParse(data.responseText)
    
      toSuccess = (msg) -> 
        $('#status > div').removeClass('alert-error').addClass('alert-success')
        $('#status > div').html( jParse(msg) )
        $('#status').fadeIn()
    
      toFail = (data) -> 
        $('#status > div').html( jText(data) )
        $('#status').fadeIn()
    
    //subscribe.coffee
    jQuery ->
      $('#_process').click (e) ->
        e.preventDefault()
    
        isValid = $('#_form').validate().form() // assumes jQuery validation plugin
        if isValid
          $('#spinner').show()
          $.ajax
            data: $('#_form').serialize()
            success: (msg) ->
              toSuccess(msg)
              fade = () -> $('#status').fadeOut('slow')
              setTimeout fade, 2000
    
            error: (data) -> toFail(data)
    
            complete: () -> $('#spinner').hide()
    

    【讨论】:

    • 我创建了 subscribe.coffee 和 main.coffee,然后将这两个脚本 main.min.js 和 subscribe.min.js 放在我的 footer.scala.html 中。但是,我遇到了一个错误。未捕获的 ReferenceError:未定义 toFail。有什么问题?
    • 'Uncaught ReferenceError: toFail is not defined' 是 google chrome 上 subscribe.min.js 的警告消息。
    • 只有当我把 在页脚末尾。
    • arghhh,抱歉,您需要在 subscribe.coffee 文件的顶部使用“jQuery ->”——我进行了相应的编辑(请记住,coffee 是基于缩进/空白的,所以“jQuery ->”必须位于缩进层次结构的顶部)
    • 我记得我确实试过这个。谢谢。你有时间检查我的编辑吗?我的编辑看起来不错吗?
    【解决方案2】:

    在隐藏字段中传递准备使用的重定向地址怎么样?

    footer

    @(returnPath: String)
    <form action="@routes.ApplicationController.saveSubscription()" method="post">
        ...
        <input type="hidden" name="returnPath" value="@returnPath" />
    </form>
    

    page1

    @main("Page 1") {
        ...
        <!-- it's important to use toString at the end -->
        @footer(routes.ApplicationController.page1.toString)
    }
    

    甚至更好:从当前的request() 中提供path

    @main("Page 1") {
        ...
        @footer(request.path)
    }
    

    controller

    public static Result saveSubscription() {
        ...
        flash("success", "success message");
        return redirect(form().bindFromRequest().get("returnPath"));
    }
    

    顺便说一句:也许使用 AJAX 表单会更容易更好?在这种情况下,您将完全避免多余的重新加载(并一次又一次地查找对象并渲染整个模板等)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多