如何使用 HTML5 本地存储数据填充 jQuery 模板 (tmpl)

发布于 2024-11-04 05:46:11 字数 394 浏览 3 评论 0原文

我正在尝试构建一个简单的 jQuery UI 模板并用存储在 localStorage 中的数据填充它。

我需要使用客人列表设置本地存储并让用户编辑该列表。单击更新时，更改将发送回服务器。

<ul id="guests">
 <li>
  Name: ${name} <br />
  Phone: ${phone} <br />
  Email: ${email}
 </li>
</ul>

我对此真的很陌生，不知道该怎么做。我只是对在页面加载和填充模板时设置本地存储感兴趣。

有人可以提供一个简短的教程吗？

我认为这是一个简单的问题...有人可以告诉我，以防万一根本不可能吗？谢谢！

原文

I am trying to build a simple jQuery UI template and populate it with data stored in the localStorage.

I need to set the local storage with a list of guests and have the user edit the list. When clicking update, the changes are sent back to the server.

<ul id="guests">
 <li>
  Name: ${name} <br />
  Phone: ${phone} <br />
  Email: ${email}
 </li>
</ul>

I am really new at this and have no idea what to do. I am just interested in setting the local storage when the page loads and populating the template.

Can someone please provide a short tutorial?

I thought this is a simple question... Can someone please let me know in case it is not possible at all? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月朦胧 2024-11-11 05:46:11

您说您要将数据保存到 localStorage，而且您还想将修改后的数据发送到服务器。

我建议您将此问题分为（第 1 部分）学习如何本地保存到 localStorage 并使用模板呈现该内容，然后（第 2 部分）学习如何在服务器上存储。我可以帮助您完成第 1 部分，因为坦率地说，我自己仍在学习第 2 部分。

好的，有两个子任务：

使用 localStorage 保存数据
使用 jQuery 模板呈现数据

使用 localStorage

您还没有指定数据的来源，所以我假设您有一些 JSON。为了简单起见，我将只使用这些数据：（

您可能想知道为什么我添加了不是纯 ASCII 的内容 - 这只是我的一个习惯，我相信从一开始就使用真实的文本进行测试。当我们最终渲染此数据，它应该在您的浏览器中正确显示。）

var philosophers = [
  {
    "phone": "1-800-123-1937", 
    "name": "H\u00e9l\u00e8ne Cixous", 
    "email": "[email protected]"
  }, 
  {
    "phone": "1-800-000-0000", 
    "name": "\u041c\u0438\u0445\u0430\u0438\u0301\u043b \u0411\u0430\u043a\u0443\u0301\u043d\u0438\u043d", 
    "email": "[email protected]"
  }, 
  {
    "phone": "1-800-770-0830", 
    "name": "Jayar\u0101\u015bi Bha\u1e6d\u1e6da", 
    "email": "[email protected]"
  }
]

因此我们需要将其放入 localStorage 中，只是为了获得一些数据作为开始。

localStorage 的技巧是您不能直接存储 JSON 对象。您只能存储字符串。有一些库旨在改善这种情况，但我们只会转换我们的对象我们自己。为此，我们将使用 JSON：

localStorage.philosophers = JSON.stringify(philosophers)

不出所料，JSON.stringify 将 JSON 对象转换为字符串，并且可以直接将其设置为 localStorage 的“属性”。

（如果您使用的是旧浏览器，那么您可能没有本机 JSON 对象 - 有一个您也可以包含该库。）

好的，现在我们在 localStorage 中存储了一些带有 philosophers 标签的联系数据。（嘿，你永远不知道什么时候需要打电话给哲学家！）

为了将数据取回并放入我们可以做某事的 Javascript 对象中，我们使用另一个 JSON 方法，JSON.parse。

philosophers = JSON.parse(localStorage.philosophers)

这都是非常人为的，因为我们首先获得了哲学家数据，然后我们将其字符串化，然后存储它，然后我们将其取出，然后我们解析然后我们又回到了起点。但实际上，这些数据可能来自其他来源——可能是外部文件或网络服务或其他任何来源。

使用模板呈现对象

由于您在模板中使用了类似 jQuery 模板语法的内容，因此我将假设您正在使用该库。 jQuery 文档向我们展示了如何使用模板渲染包含某些对象的变量（就像我们的 philosophers 变量中的对象），这是这些文档的关键部分：

// Convert the markup string into a named template
$.template( "summaryTemplate", "<li>${Name}</li>" );

function renderList() {
   // Render the movies data using the named template: "summaryTemplate"
   $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}

这是一种获取您的对象的方法。 template 来工作（还有其他可以说更简洁的方法，但 jQuery 模板本身就是一个主题）：

var myTemplate = "<li>Name: ${name}<br/>Phone: ${phone}<br/>Email: ${email}</li>";
$.template("contactLi", myTemplate);

创建一个模板并将其存储在名为 contentLi 的变量中。（请注意，$.template 希望给定的变量名称作为字符串给出，这让我觉得很奇怪。我发现 jQuery 模板命名和定义这些方法的方式令人困惑，这是我更喜欢的原因之一耸耸肩。）

另外，请注意，我们没有在模板中包含 ul，因为不会对每个渲染对象重复该操作。相反，我们将添加 ul 作为标记中的钩子，并将组装的模板作为其子项重复渲染。这只需要一行 jQuery 模板，相当不错：

$.tmpl( "contactLi", philosophers ).appendTo( "#guests" );

所以你就看到了一个渲染的列表。

我知道这并不能回答你的全部问题，但这里有很多东西可以开始。

这是一个您可以尝试的示例，它最终会呈现如下内容：（

 Name: Hélène Cixous
 Phone: 1-800-123-1937
 Email: [email protected]

 Name: Михаи́л Баку́нин
 Phone: 1-800-000-0000
 Email: [email protected]

 Name: Jayarāśi Bhaṭṭa
 Phone: 1-800-770-0830
 Email: [email protected]

嘿嘿，男孩，SO 的语法突出显示不会不能很好地处理 Unicode 文本！）

you say you want to save the data to localStorage, but also that you want to send modified data to the server.

I would suggest that you divide this problem up into (Part 1) learning how to save locally to localStorage and rendering that content with templating and then (Part 2) learning how to store on a server. I can help you with Part 1, since quite frankly I'm still learning about Part 2 myself.

Okay so, two subtasks:

using localStorage to persist data
using jQuery templates to render data

Using localStorage

You haven't specified where your data is coming from, so I'll assume you have some JSON. For simplicity I'll just use this data:

(You might be wondering why I added content that isn't plain ASCII -- it's just a habit of mine, I believe in testing with realistic text from the get-go. When we finally render this data, it should look right in your browser.)

var philosophers = [
  {
    "phone": "1-800-123-1937", 
    "name": "H\u00e9l\u00e8ne Cixous", 
    "email": "[email protected]"
  }, 
  {
    "phone": "1-800-000-0000", 
    "name": "\u041c\u0438\u0445\u0430\u0438\u0301\u043b \u0411\u0430\u043a\u0443\u0301\u043d\u0438\u043d", 
    "email": "[email protected]"
  }, 
  {
    "phone": "1-800-770-0830", 
    "name": "Jayar\u0101\u015bi Bha\u1e6d\u1e6da", 
    "email": "[email protected]"
  }
]

So we need to get this into localStorage, just to have some data to start with.

The trick about localStorage is that you can't just directly store JSON objects. You can only store strings. There are some libraries out there designed to improve on this situation, but we'll just convert our objects ourselves. To do that we'll use JSON:

localStorage.philosophers = JSON.stringify(philosophers)

Unsurprisingly, JSON.stringify turns JSON objects into a string, and that can be set directly as an "attribute" of localStorage.

(If you're using an old browser, then you might not have the native JSON object -- there's a library you can include for that too.)

Okay, so now we have some contact data stashed in localStorage with the label of philosophers. (Hey, you never know when you might need to call a philosopher!)

To get that data back out and into a Javascript object we can do something with, we use another JSON method, JSON.parse.

philosophers = JSON.parse(localStorage.philosophers)

This is all pretty artificial, since we've got the philosophers data in the first place, then we stringify it, and then we store it, and then we take it right back out, and then we parse it, and then we're back where we started. But in reality such data will come from some other source -- perhaps an external file or a web service or whatever.

Using templates to render objects

Since you used what looks like jQuery template syntax in your template, I'm going to assume that's the library you're using. The jQuery docs show us how we can render a variable containing some objects (like what we have in our philosophers variable) with a template, here's the key bit of those docs:

// Convert the markup string into a named template
$.template( "summaryTemplate", "<li>${Name}</li>" );

function renderList() {
   // Render the movies data using the named template: "summaryTemplate"
   $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}

Here's one way you can get your template to work (there are other, arguably cleaner methods, but jQuery templates are a topic unto themselves):

var myTemplate = "<li>Name: ${name}<br/>Phone: ${phone}<br/>Email: ${email}</li>";
$.template("contactLi", myTemplate);

That creates a template and stores it in a variable named contentLi. (Note that $.template wants that given variable name given as a string, which strikes me as weird. I find the way jQuery templates names and defines these methods confusing, which is one of the reasons I prefer Mustache for templating. Shrug.)

Also, note that we don't have the ul included in the template, because that's not going to be repeated for each rendered object. Rather, we're going to add the ul as a hook in the markup, and render the assembled template repeatedly as a child of that. Which just takes a single line with jQuery templates, rather nice:

$.tmpl( "contactLi", philosophers ).appendTo( "#guests" );

So there you go, a rendered list.

I know this doesn't answer your whole question but there's a lot here to start with.

Here's an example you can try out, it ends up rendering something like:

 Name: Hélène Cixous
 Phone: 1-800-123-1937
 Email: [email protected]

 Name: Михаи́л Баку́нин
 Phone: 1-800-000-0000
 Email: [email protected]

 Name: Jayarāśi Bhaṭṭa
 Phone: 1-800-770-0830
 Email: [email protected]

(Hehe, boy, SO's syntax highlighting doesn't handle that Unicode text very well!)

回复收藏 0 原文