Я пытаюсь выучить весенний бутон и тимелист. До сих пор мне удалось успешно присоединить объект модели к представлению из контроллера. Внутри представления я хочу, чтобы пользователь заполнил список моделей через форму. Создание ввода и добавление их в виде html элементов списка работает нормально с помощью функции JS.
Но когда пользовательский ввод закончен, я хочу добавить все входы из списка html в список моделей ингридиентов имена по пу sh на кнопке "получить рецепт".
Другими словами, как я могу использовать тимелеф, чтобы заполнить список ингредиентов Имен в объекте объекта с помощью ввода из списка html?
Контроллер:
@org.springframework.stereotype.Controller
public class Test_Controller {
@RequestMapping(value = "/searchPage", method = RequestMethod.GET)
public String searchPageReturner(Model model) {
model.addAttribute("RecipeSearchObject", new RecipeSearchObject());
return "searchow";
}
}
Модель
public class RecipeSearchObject {
private String recipeName;
private List<String> ingredientNames;
public String getRecipeName() {
return recipeName;
}
public void setRecipeName(String recipeName) {
this.recipeName = recipeName;
}
public List<String> getIngredientNames() {
return ingredientNames;
}
public void setIngredientNames(List<String> ingredientNames) {
this.ingredientNames = ingredientNames;
}
public void addIngredientToList(String ingredient){
this.ingredientNames.add(ingredient);
}
}
Вид
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title th:text="#{browsertitle}"></title>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}" href="/css/style.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-7">
<form autocomplete="off" >
<div class="autocompleteform" style="width:300px">
<input id="ingredientInputFieldId" type="text" name="myInsertedFood" placeholder="eg: cucumber" style="border-radius: 5px">
</div>
<div class="btn" onClick="addFoodToList();toggle_visibility('inventoryheader');" style="margin-left: 1em">Add ingredient
</div>
<button class="btn" value="Submit" style="margin-left: 9em">Get recipe</button>
</form>
</div>
</div>
</div>
<div class="container">
<h2 id="inventoryheader" style="display: none">Inventory:</h2>
<div class="row">
<div class="col-md-4">
<ul id="insertedFoodsList">
</ul>
</div>
</div>
</div>
<script type="text/javascript" th:src="@{/js/toggle_header_visibility.js}"></script>
<script type="text/javascript" th:src="@{/js/autocompleteIngredients.js}"></script>
<script type="text/javascript" th:src="@{/js/addfoodtolist.js}"></script>
</body>
</html>
JS -функция
addFoodToList = function() {
var ul = document.getElementById("insertedFoodsList");
var li = document.createElement("li");
li.innerHTML = '<span class="close">×</span>';
li.onclick = function() {
this.parentNode.removeChild(this);
hideInventoryHeader()
}
var foodName = document.getElementsByName("myInsertedFood")[0].value;
if (foodName.length > 1) {
li.appendChild(document.createTextNode(foodName));
ul.appendChild(li)
}
}