TodoMVC 与 Thymeleaf 和 HTMX

    
           name="title"
           hx-target="#todo-list"
           hx-swap="beforeend"
           hx-post="/"
           hx-trigger="keyup[key=='Enter']"
           value="">
 

      id="active-items-count"
      class="todo-count"
      hx-get="/active-items-count"
      hx-swap="outerHTML"
      hx-trigger="itemAdded from:body">
        
            0 items left
        
        
            1 item left
        

    @PostMapping(headers = "HX-Request")
    public String htmxAddTodoItem(TodoItemFormData formData,
                                  Model model,
                                  HttpServletResponse response) { 
        TodoItem item = repository.save(new TodoItem(formData.getTitle(), false));
        model.addAttribute("item", toDto(item));
 
        response.setHeader("HX-Trigger", "itemAdded"); 
        return "fragments :: todoItem";
    }

  
  ...

    @PutMapping(value = "/{id}/toggle", headers = "HX-Request") 
    public String htmxToggleTodoItem(@PathVariable("id") Long id,
                                     Model model,
                                     HttpServletResponse response) {
        TodoItem todoItem = repository.findById(id)
                                      .orElseThrow(() -> new TodoItemNotFoundException(id));
 
        todoItem.setCompleted(!todoItem.isCompleted());
        repository.save(todoItem);
 
        model.addAttribute("item", toDto(todoItem)); 
 
        response.setHeader("HX-Trigger", "itemCompletionToggled"); 
        return "fragments :: todoItem"; 
    }

    @DeleteMapping(value = "/{id}", headers = "HX-Request") 
    @ResponseBody 
    public String htmxDeleteTodoItem(@PathVariable("id") Long id,
                                     HttpServletResponse response) {
        repository.deleteById(id);
 
        response.setHeader("HX-Trigger", "itemDeleted"); 
        return ""; 
    }

        th:attr="hx-delete=@{/{id}(id=${item.id})},hx-target=|#list-item-${item.id}|"
        hx-trigger="click"
        hx-swap="outerHTML"
>

      id="active-items-count"
      class="todo-count"
      hx-get="/active-items-count"
      hx-trigger="itemAdded from:body, itemCompletionToggled from:body, itemDeleted from:body">
    ...

完全有可能有一个交互式应用程序，该应用程序避免使用Spring Boot，Thymeleaf和HTMX的某些操作的页面刷新。 使用使它变得非常容易，或者如果你想更好地控制发生的事情，这也不是那么难。hx-boost

一开始确实会习惯一些。 要记住的最重要的一点是从控制器返回 HTML 片段，而不是 JSON。 并确保 HTML 上的元素具有属性，以便 HTMX 可以定位它们。id

有关完整源代码，请参阅 GitHub 上的 todomvc-htmx-boost 和todomvc-htmx。

如果您有任何问题或意见，请随时在GitHub 讨论中发表评论。