Question

例如，我有个人资料页面并选择“关于”，“照片”，“视频”部分等，我不想每次更改部分时刷新页面，我只想更改内容用Javascript的容器。当然，在Javascript文件中编写页面标记并不方便，我的想法是编写每个视图的div并只显示其中一个：

<div id="about>About content</div>

<div id="photos" style="display: none;">Photos content</div>

但是，我认为有更好的方法可以做到这一点，因为我不喜欢在页面上保留隐藏的视图。此外，在大多数情况下，视图中的内容应该由脚本生成，因此它看起来像模板引擎的作业，但我不确定Javascript中是否有这样的内容。

那么在Javascript中实现这一点的最佳方式是什么。我希望我的想法很清楚。提前谢谢！

Answer 1

尝试使用mustache它是javascript的模板引擎。

此外，您可以使用AngularJS模板（按需动态加载到页面中）这是非常容易使用。（但是包含你可能不想要的其他东西......但是应该要;）

Answer 2

每当用户点击链接时，使用jQuery获取视图。

例如，绑定click事件：

$('#clickToSeePhotos').click(function(){
    $('#photosContainer').load('pathTo/photos.html');
});

$('#clickToSeeAbout').click(function(){
    $('#aboutContainer').load('pathTo/about.html');
});

这是html：

<a id="clickToSeePhotos" href="#">Photos<a/>
<div id="photosContainer"></div>

<a id="clickToSeeAbout" href="#">About<a/>
<div id="aboutContainer"></div>

以下是jQuery页面的链接，其中提供了load的更多信息和示例 http://api.jquery.com/load/

您可以下载jQuery库并在服务器上使用它。但是，正如@Cybrix建议你也可以指向Google托管的图书馆。见this link。最后，这可以提高用户的效果。

使用Javascript更改“视图”的最佳方法是什么？

2 个答案: