Lift-CRUD，带有设计师友好的模板和Ajax

在Lift中实现一个简单的CRUD接口并使其成为一个简单的接口，有什么干净的方法呢

设计师友好型

阿贾克斯

假设我们有一个视野

<table data-lift="CrudList">
    <tr>
         <td role="data">Item goes here</td>
         <td><button role="remove" type="button">remove</button></td>
    </tr>
    <tr class="clearable">
         <td>Item two here</td>
         <td><button type="button">remove</button></td>
    </tr>
    <tr class="clearable">
         <td>Item three!</td>
         <td><button type="button">remove</button></td>
    </tr>
</table>
<form data-lift="form.ajax">
    <div data-lift="CrudList.create">
        <input type="text" name="text"></input>
        <button type="submit"></button>
    </div>
</form>

物品放在这里
去除
这里是第二项
去除
第三项！
去除

和一个片段

object CrudList {
  def render = {
    def remove(item: String) = () => {
      ListDAO.remove(item)
      JE.JsRaw("""Some JavaScript to remove <tr> from the UI""")
    }

    ClearClearable &
    "tr *" #> ListDAO.all.map(item => {
      "role=data" #> item &
      "role=remove" #> ajaxInvoke(remove(item))
    })
  }

  def create = {
    var text = ""

    def process(): JsCmd = {
      val item = ListDAO.create(text)
      JsCmds.Noop // TODO: replace this with some JsCmd 
                  // that will create and populate new table row in the UI
                  // without polluting the snippet with markup
    }

    "@text" #> SHtml.text(text, s => text = s) &
    "button *+" #> SHtml.hidden(process)
  }
}

objectcrudlist{
def呈现={
def删除（项目：字符串）=（）=>{
ListDAO.remove（项目）
JsRaw（“要从UI中删除的一些JavaScript”）
}
可清除&
“tr*”#>ListDAO.all.map（项=>{
“角色=数据”#>项&
“角色=删除”#>ajaxInvoke（删除（项目））
})
}
定义创建={
var text=“”
def process（）：JsCmd={
val item=ListDAO.create（文本）
Noop//TODO:将其替换为一些JsCmd
//这将在UI中创建并填充新表行
//而不会用标记污染代码段
}
“@text”#>SHtml.text（text，s=>text=s）&
“按钮*+”#>SHtml.hidden（进程）
}
}

示例可能有bug，纯粹是为了演示

render

代码片段非常简单-我们修改现有标记并将列表呈现为表行

---

我有点犹豫是否要完成

create

代码片段。保存列表项的代码很简单，但我不知道如何使用新的

更新

部分。我希望避免用标记污染代码段，为设计者留下空间，让他们按照自己的意愿处理表。您将如何完成此片段？

像这样的方法如何

在类中，添加一个字段

private var html:NodeSeq=NodeSeq.Empty

将渲染方法更改为

def render（in:NodeSeq）={html=in；…；cstransform.apply（in）}

在

create

中，再次重用html。类似于

JsAppend（“id”，transformation.apply（html））

我知道的备选方案：

• SHtml.memoize

  （可能非常有用，试试看）
• 为
  列创建单独的html-s。在代码中，您可以使用

  defhtml:NodeSeq=Templates（“myHtmlFile”：：Nil）.openOr（NodeSeq.Empty）

  。对我来说似乎很脏，因为
  代码会从
  中分离出来

---

最简单的方法是交换整个HTML表。为此，您可以使用

SHtml

中的内置函数来记忆初始转换
为此，我们将为

表

提供如下ID：

<table data-lift="CrudList" id="mytable">

任何对

tableMemo.get.foreach{{{uu.setHtml}

的调用都将在第一次呈现时重新呈现该表，并设置

RequestVar

如果您只希望重新渲染受影响的行，那么这将变得更具挑战性
我可能会尝试这样的方法：
首先，为给定行创建一个带有HTML的模板。在本例中，我们将把它放在

templates hidden/rowtemplate.html

中。内容如下：

<tr>
     <td role="data">Item goes here</td>
     <td><button role="remove" type="button">remove</button></td>
</tr>

我还没有测试，以确保它所有的工作，但希望将指向您在正确的方向

<tr>
     <td role="data">Item goes here</td>
     <td><button role="remove" type="button">remove</button></td>
</tr>

  val rowTemplate = Templates("templates-hidden" :: "rowtemplate" :: Nil) openOr <tr></tr>

  def render = {
    def remove(item: String) = () => {
      ListDAO.remove(item)
      JsCmds.Run("$('#' + item.id).remove()")
    }

    ClearClearable &
    "tr" #> {
      "tr" #> ListDAO.all.map(item => {
        "* [id]" #> item.id &
        "role=data" #> item &
        "role=remove" #> ajaxInvoke(remove(item))
      })
    }.apply(rowTemplate)
  }

 def process(): JsCmd = {
   val item = ListDAO.create(text)
   val rowNS = {
        "* [id]" #> item.id &
        "role=data" #> item &
        "role=remove" #> ajaxInvoke(remove(item))
    }.apply(rowTemplate)
   JsCmds.Run("tr:last").append(rowNS.toString)
 }

 "@text" #> SHtml.text(text, s => text = s) &
 "button *+" #> SHtml.hidden(process)
}