Это мой index.handlebars:
<div class="container">
<h1>Burgers</h1>
<img src="assets/images/burger.jpg">
<div id="not_eaten">
<h2>Burger that are not eaten</h2>
<ol>
{{#each burger}}
{{#unless devoured}}
{{> burger/burger }}
{{/unless}}
{{/each}}
</ol>
</div>
<div id="eaten">
<h2>Burgers that are eaten</h2>
<ul>
{{#each burger}}
{{#if devoured}}
{{> burger/burger }}
{{/if}}
{{/each}}
</ul>
</div>
<div id="addBurger">
<p>Add a Burger!</p>
<form class="create-form">
<div class="form-group">
<label for="bt">Burger Type:</label>
<input type="text" id="bt" name="name">
</div>
<button type="submit">Submit</button>
</div>
</div>
Это мой burger.handlebars:
<li>
{{this.burger_name}}
<button class="change-eat" data-id="{{id}}" data-newEat="{{devoured}}">
{{#if devoured}}Make!{{else}}Eat!{{/if}}
</button>
</li>
Вот где jQuery для этого:
$(function() {
$(".change-eat").on("click", function(event) {
var id = $(this).data("id");
var newDevoured = $(this).data("newEat");
var newEatState = {
devoured: 1
}
$.ajax("/api/burger/" + id, {
type: "PUT",
data: newEatState
}).then(
function() {
console.log("changed eaten to", newDevoured);
location.reload();
}
);
});
$(".create-form").on("submit", function(event) {
event.preventDefault();
var newBurger = {
burger_name: $("#bt").val().trim(),
devoured: 0
};
// Send the POST request.
$.ajax("/api/burger", {
type: "POST",
data: newBurger
}).then(
function() {
console.log("created new burger");
// Reload the page to get the updated list
location.reload();
}
);
});
});
// Я не могу заставить элементы бургера переместиться на другую сторону.Я пытаюсь сделать это, изменив логическое выражение на «пожрал», но я не могу заставить это работать.
По сути, когда вы вводите что-то во ввод и нажимаете «Отправить», оно будет отображаться в списке «Бургер, который не съел» с кнопкой «есть» рядом с ним.И после нажатия кнопки «съесть», он должен переместить ее в список «гамбургеры, которые съели».
Мне нужно сделать это, изменив логическое значение, но я не могу этого понять.