Javascript 车把-显示来自本地存储器的数据
我创建了一个简单的crud应用程序,它使用localstorage来保存和检索对象。现在我想用handlebar.JS替换连接JS+HTML的丑陋函数。我在HTML模板中显示来自本地存储的数据时遇到问题-我必须编写自定义Handlebar helper,还是有一个简单的解决方案 这是我的密码 HTML部分Javascript 车把-显示来自本地存储器的数据,javascript,handlebars.js,Javascript,Handlebars.js,我创建了一个简单的crud应用程序,它使用localstorage来保存和检索对象。现在我想用handlebar.JS替换连接JS+HTML的丑陋函数。我在HTML模板中显示来自本地存储的数据时遇到问题-我必须编写自定义Handlebar helper,还是有一个简单的解决方案 这是我的密码 HTML部分 <div id="output"></div> <script id="tpl" type="text/x-handlebars-template">
<div id="output"></div>
<script id="tpl" type="text/x-handlebars-template">
{{#each itemData}}
{{name}}
{{/each}}
</script>
此代码运行良好。检查您的应用程序上下文,并在需要时替换。。在for循环中,你有这个.items还是app.items?!app.items检索良好的数据
var app = {
data: [],
init: function () {
this.cacheDom();
this.bindEvents();
this.render();
},
render: function () {
app.getFromLocalStorage();
var itemData = app.items;
var source = document.getElementById("tpl").innerHTML;
var template = Handlebars.compile(source);
document.getElementById("output").innerHTML = template(itemData);
},
cacheDom: function () {
this.list = document.getElementById("list");
this.addInput = document.getElementById("addInput");
this.addBtn = document.getElementById("addBtn");
this.document = $(document);
},
bindEvents: function () {
this.addBtn.addEventListener("click", app.addItem);
this.document.on("change", ".itemSelect", function (e) {
if (this.value === "erase") {
app.deleteItem(e);
} else if (this.value === "edit") {
app.editItem(e);
}
});
},
saveToLocalStorage: function () {
localStorage.setItem("app.items", JSON.stringify(app.items));
},
getFromLocalStorage: function () {
var retrievedObject = localStorage.getItem("app.items");
app.items = retrievedObject;
},
displayItem: function () {
app.getFromLocalStorage();
var data = "";
//put into handlebars
for (var i in this.items) {
var optionValue =
'<select class="itemSelect">' +
'<option hidden value="unchosen">Options</option>' +
'<option value="edit">Edit</option>' +
'<option value="erase">Erase</option>' +
'</select></li></span>';
//nadaj kolejno id
data += '<li class="listItem"><span id=' + i + ">" + app.items[i].name + optionValue;
}
app.list.innerHTML = data;
},
editItem: function (e) {
app.getFromLocalStorage();
var tableItemNumber = e.target.parentNode.id;
var editItemValue = prompt("Edytuj");
if (editItemValue.length === 0) {
alert("Formularz jest pusty");
}
app.items[tableItemNumber].name = editItemValue;
app.saveToLocalStorage();
app.displayItem();
},
};
app.init();
displayItem: function () {
app.getFromLocalStorage();
var data = "";
var source = document.getElementById("tpl").innerHTML;
var template = Handlebars.compile(source);
//below most important part
var html = template(app);
document.getElementById("output").innerHTML = html;
}