在play框架中使用coffeescript的正确方法是什么？

Question

I am a new learner of play framework. While i am following Play Framework Essentials books, I tried coffeescript example which will delete added items but i failed the button doesn't response.

shop.coffee

 require(['logic'], (Logic) ->
  for deleteBtn in  document.querySelectorAll('button.delete-item')
    do  (deleteBtn) ->  Logic(deleteBtn,deleteBtn.dataset.id)
)

logic.coffee

define(['ui', 'routes'],    (Ui,routes) ->
  (node,id) ->
    ui  =   Ui(node)
    ui.forEachClick(()  ->
      xhr   =new XMLHttpRequest()
      route = routes.controllers.Items.delete(id)
      xhr.open(route.method,    route.url)
      xhr.addEventListener('readystatechange',  ()  ->
        if  xhr.readyState  ==  XMLHttpRequest.DONE
          if    xhr.status  ==  200
            ui.delete()
          else
            alert('Unable   to  delete  the item!')
      )
      xhr.send()
    )
)

ui.coffee

define(() ->
  (node) ->
    delete: ()  ->
      li = node.parentNode
      li.parentNode.removeChild(li)
    forEachClick: (callback)    ->
      node.addEventListener('click', callback)

)

index.scala.html

<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>
<script src="@routes.Assets.at("javascripts/shop.js")"></script>

Also javascript reverse routing is used to avoid duplication.

def javascriptRoutes    =   Action  {   implicit    request =>
 val javascriptR = JavaScriptReverseRouter("routes")(
          routes.javascript.Items.delete
        )
    //I didnt figure out, something is wrong with coffeescript file...
        Ok(JavaScript(
          s"""
             define(function()  { $javascriptR; return  routes  })
           """
        ))
      }

Note: I have done this with javascript example. What i realize is coffeescript easier to learn that's why i want to figure out the problem.

Answer 1

我认为您可以从播放文档https://www.playframework.com/documentation/2.5.x/AssetsCoffeeScript中获得一些想法