javascript - 如何用JavaScript/Jquery轻松实现screens/views？

Question

我确定我遗漏了一些非常基本的东西，但我才刚刚开始加快 jQuery 和 Javascript 编程的速度。以前我使用 PHP 进行服务器端编程。我现在正在为 HTML5 webapp 创建原型(prototype)，我希望在其中拥有不同的屏幕。现在使用 PHP 非常简单，我只需使用像 Smarty 这样的服务器端模板就可以了。

但是为了让我的应用更像 webapp，我想在屏幕之间动态切换而无需重新加载窗口。

我已经研究了几个可能回答我的问题的选项，但我不确定我是否在正确的轨道上。

我已经检查了例如 JsRender、JsViews 甚至是纯 jquery 加载命令。但我不确定这些东西是否会让我拥有这样的东西:

标题部分
主要内容
FOOTER_PART(还包含指向我使用的常见 JS 文件的链接)

我想动态更新 MAIN_CONTENT 部分。目前我的应用程序只有一个页面，属于该页面的所有自定义逻辑都在一个 JS 文件中。在这个 JS 文件中，我使用一个简单的 $(function() { ... 来加载我的页面，所以每当它被加载时，我的页面的一部分都会异步更新。这很好，因为我在这个特定页面中的所有 block 都会必须在加载该页面时加载。

但是如果我有一个链接，比如 main.html#otherscreen，当我点击那个屏幕时，我想更改我的 MAIN_CONTENT 并运行另一个页面加载特定的 JS 来处理另一个屏幕上的 block ，而不是第一页？

我知道我可能仍然可以使用服务器端模板并使用 AJAX 请求加载我的页面，但再次不确定这是否是正确的方法。

能请教一下吗？ :)

谢谢和最好的问候，本斯

Answer 1

查看 jQuery.load() .使用此功能，您可以将内容动态加载到页面上的 div 中，这就是我认为您想要做的。只需在要加载内容的页面上找到 div 并调用

$('#mydiv').load(url, data, function(response){
    //do something once it's done.
});

---

根据您的意见...

这其实很简单。 .load() 应该替换div中的内容(我想。如果不是，就先调用.empty())。当然你可以花哨并添加效果，比如

function changePages(url) {
    $('#mydiv').fadeOut('fast', function() { 
        $(this).load(url, function(response){
            $('#mydiv').fadeIn('fast');
        });
    });
}

要处理诸如 URL 中的散列之类的事情，在您的点击事件中，您必须确保首先调用 e.preventDefault():

$('#mylink').click(function(e){ 
    e.preventDefault(); //e is a jquery event object
    var link = $(this);
    var hash = link.attr('href'); // get the hashtag if the href is '#something'
    changePages(someUrl + hash);
});