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

Question

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

我需要使用guest虚拟机列表设置本地存储,并让用户编辑列表.单击更新时,更改将发送回服务器.

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

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

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

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

Answer 1

您说要保存数据localStorage,还要将修改后的数据发送到服务器.

我建议你将这个问题分成(第1部分)学习如何在本地保存localStorage并使用模板渲染该内容,然后(第2部分)学习如何在服务器上存储.我可以帮助你完成第1部分,因为坦白说我自己还在学习第2部分.

好的,两个子任务:

1. 使用localStorage来保存数据
2. 使用jQuery模板呈现数据

使用localStorage

您尚未指定数据的来源,因此我假设您有一些JSON.为简单起见,我将只使用这些数据:

(你可能想知道为什么我添加的内容不是普通的ASCII - 这只是我的习惯,我相信从一开始就用真实的文本进行测试.当我们最终呈现这些数据时,它应该看起来正确浏览器.)

var philosophers = [
  {
    "phone": "1-800-123-1937", 
    "name": "H\u00e9l\u00e8ne Cixous", 
    "email": "helene@stanford.edu"
  }, 
  {
    "phone": "1-800-000-0000", 
    "name": "\u041c\u0438\u0445\u0430\u0438\u0301\u043b \u0411\u0430\u043a\u0443\u0301\u043d\u0438\u043d", 
    "email": "mikhail@ispitondns.com"
  }, 
  {
    "phone": "1-800-770-0830", 
    "name": "Jayar\u0101\u015bi Bha\u1e6d\u1e6da", 
    "email": "jay@ancientindia.edu"
  }
]

所以我们需要将其纳入其中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)

这一切都非常人为,因为我们philosophers首先得到了数据,然后我们对它进行字符串化,然后我们将其存储起来,然后我们立即将其取出,然后我们解析它,然后我们又回来了我们开始的地方.但实际上这些数据将来自其他一些来源 - 可能是外部文件或Web服务或其他任何来源.

使用模板渲染对象

由于您在模板中使用了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" );
}

这里有一种方法可以让你的模板工作(还有其他的,可以说更干净的方法,但jQuery模板本身就是一个主题):

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

这会创建一个模板并将其存储在名为的变量中contentLi.(请注意,$.template希望给定变量名称作为字符串,这让我感到很奇怪.我发现jQuery模板的名称并定义这些方法令人困惑,这是我更喜欢使用Mustache进行模板化的原因之一.耸肩.)

另外,请注意我们没有ul包含在模板中,因为不会为每个渲染对象重复.相反,我们将ul在标记中添加一个钩子,并将组装后的模板作为子项重复渲染.这只是jQuery模板的一行,相当不错:

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

所以你去了,一个渲染列表.

我知道这并没有回答你的整个问题,但这里有很多东西要开始.

这是一个你可以尝试的例子,它最终呈现如下:

 Name: Hélène Cixous
 Phone: 1-800-123-1937
 Email: helene@stanford.edu

 Name: ??????? ????????
 Phone: 1-800-000-0000
 Email: mikhail@ispitondns.com

 Name: Jayar??i Bha??a
 Phone: 1-800-770-0830
 Email: jay@ancientindia.edu

(呵呵,男孩,SO的语法高亮不能很好地处理Unicode文本!)