Question

我正在尝试在Scala Lift中编写一个呈现项目列表（提案）的页面，并允许单击每个项目旁边的按钮以对该项目执行验证操作。我正在采取的方法是为每个项目呈现一个表单，并让它能够对该项目采取ajax操作。该页面呈现正常，但javascript脚本似乎没有为每个单独的表单呈现。

这是我的首发html：

<div class="lift:Verify.list" >
  <ul>
    <li class="proposal jsonForm" data-lift="Verify">
      <script class="jsonScript" data-lift="tail"></script>
      <div>
        <span class="name">Name</span> is <span class="verified">quantumly verified.</span><input type="submit" value="Verify"/><span class="result"/>
      </div>
    </li>
  </ul>
</div>

这是我的验证对象：

object Verify extends Logger {

  val proposals:List[Proposal] = Proposal.findAll

  def list = ".proposal *" #>   proposals.map { p =>
      ".name" #> p.name &
      ".verified" #> { p.verified.get match {
          case true => "verified."
          case false => "UNVERIFIED."
        }}
  }

  def render = ".jsonForm" #> ((ns:NodeSeq) => jsonForm(VerificationServer, ns)) &
               ".jsonScript" #> Script(VerificationServer.jsCmd)


  object VerificationServer extends JsonHandler with Loggable {
    def apply(in: Any):JsCmd = in match {
      case JsonCmd("processForm", target, params: Map[String, String], all) => 
        SetHtml("result", Text("Verified"))
    }
  }
}

当我在页面渲染后查看源代码（加载了三个提案）时，我在底部看到了这一点：

<script src="/ajax_request/liftAjax.js" type="text/javascript"></script>

    <script class="jsonScript"></script>
    <script class="jsonScript"></script>
    <script class="jsonScript"></script>

<script type="text/javascript">
// <![CDATA[

var lift_page = "F1026676301564EIZULQ";
// ]]>
</script>

空<script class="jsonScript"></script>似乎是个问题：在包含单个表单的页面中，这包含如下内容：

<script type="text/javascript" id="jsonScript">
// <![CDATA[
function F590130389017U5BRNC(obj) {liftAjax.lift_ajaxHandler('F590130389017U5BRNC='+ encodeURIComponent(JSON.stringify(obj)), null,null);}
// ]]>
</script>

我（显然）对Lift很新，可能不是最好的方式。如果有更好的方法来实现目标，那是什么？如果这是一条合理的路径，为什么这些脚本标签没有被填充？

Answer 1

我不确定你正在寻找的输出，但似乎有很多东西在你的例子中有效。例如，SetHtml需要和ID，但是您正在传递一个类。此外，您的script代码会在代码段中调用代码中未显示的方法tail。

那就是说，这样的事情可以让你做我认为你想做的事情：

class TestSnippet {
  /** A definition of the Proposal class we will use *//
  case class Proposal(val id:Long, val name:String, var verified:Boolean)

  val proposals = //Define collection here

  def render = ".proposal" #> proposals.map { p =>
    "div [id]" #> s"prop-${p.id}" &
    ".name" #> p.name &
    ".verified" #> { 
      p.verified match {
        case true => "verified."
        case false => "UNVERIFIED."
      }
    } &
    ".submit" #> SHtml.ajaxButton("Verify", () => {
      p.verified = true
      JsCmds.Run("$('#prop-" + p.id + " .result').empty().html('" + p.verified + "')")
    })
  }
}

并将其应用于HTML

<div>
  <ul data-lift="TestSnippet">
    <li class="proposal">
      <div>
        <span class="name">Name</span> is <span class="verified">quantumly verified.</span><input type="submit" class="submit" value="Verify"/><span class="result"/>
      </div>
    </li>
  </ul>
</div>

这样做会迭代您的proposals集合，对于每个项目，将容器id的{{1}}属性设置为唯一值（此处我假设{{1 }}有一个div字段，因此Proposal可以轻松引用它。然后，我将id绑定到我们输出jQuery和ajaxButton的同一CSSTransform中的提交标记。单击时，该按钮会将已验证的字段设置为name，然后在客户端上执行一些JavaScript - 在这种情况下，它是一个verified表达式，用于查找我们分配的true的div并将jQuery范围内的文字设置为id的值。

因此，页面最初会像这样呈现：

Nothing Verified

点击按钮会产生这样的结果：

enter image description here

对于更复杂的更新，例如，如果您想要“已更正”更改为“已验证”，则还提供了一些内置的Memoization功能，可以帮助重新呈现CSS Snippet。您可以在here上查看更多相关信息here，Lift mailing list以及一系列讨论。

多个表单不呈现回调脚本

1 个答案: