是否有一个 CakePHP 组件/插件可以为 ajax 页面提供永久链接?

发布于 2024-11-05 09:38:57 字数 528 浏览 0 评论 0原文

我正在使用 JsHelper 编写 JS 链接以使用 ajax 加载到页面中。像这样:

<?= $this->Js->link($item['Series']['title'], array(
    'controller' => 'series',
    'action' => 'view',
    $item['Series']['id']
), array('update' => '#menu-items')); ?>

这工作正常,但现在我想添加它,以便您可以链接到这些页面。因此,例如,当您单击该链接时,它会将您重定向到 example.com/#!/series/2。然后,您也可以访问此网址,正确的页面将加载到 #menu-items div 中。

这是我必须从头开始编写的东西,还是有一个 CakePHP 帮助器或插件可以为我做这件事?我以前有过做类似事情的经验,但从未使用过 CakePHP,并且不确定从哪里开始。

谢谢,

I'm using the JsHelper to write JS links to use ajax to load in a page. Like this:

<?= $this->Js->link($item['Series']['title'], array(
    'controller' => 'series',
    'action' => 'view',
    $item['Series']['id']
), array('update' => '#menu-items')); ?>

This is working fine, but now I'd like to add it so that you can link to these pages. So, for example, when you click the link it would redirect you to example.com/#!/series/2. You could then also go to this url and the correct page would be loaded in the #menu-items div.

Is this something I'd have to write from scratch, or is there a CakePHP helper or plugin available that would do it for me? I have experience in doing something like this before, but never with CakePHP and unsure where to start.

Thanks,

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

随心而道 2024-11-12 09:38:57

我现在已经尝试自己解决这个问题,因为我认为由于没有响应,因此还没有为 CakePHP 构建类似的东西。

首先是 javascript:

var hash = '';
window.setInterval(function() {
    if(hash != location.hash) {
        hash = location.hash;

        if(hash.indexOf('#!/') != -1) {
            var url = hash.substr(2);

            $('#my-div').load(url);
        }
    }
}, 300);

它的作用是检查 location.hash 是否已更改,如果已更改,则检查它是否以 #!/。 (即 #!/:controller/:action/:id 是我正在寻找的哈希值)。然后它只调用 jQuery 加载函数来加载该控制器和操作。

然后,我必须修改链接以使用 HtmlHelper 中的 url 方法。

<?
$hashUrl = $this->Html->url(array(
    'controller' => 'categories',
    'action' => 'view',
    $category['Category']['id']
));

echo $this->Html->link($category['Category']['title'], '#!' . $hashUrl);
?>

这会为控制器和操作创建一个字符串,然后将其附加到 link 方法中的 #! 中。这样做可能看起来很冗长(您可能可以编写一个自定义帮助程序使其成为一行),但它允许您稍后更改 config/routes.php 中的 URL。您最终会得到这样的 url:#!/categories/view/2

最后,您需要确保在控制器中,您使用的每个方法的末尾都有这个。

$this->render('view', 'ajax');

我并不认为这是一个完美的解决方案,但目前它的工作效果非常好。也欢迎改进建议。

I've had a go at tackling it myself now, as I figured that as there was no response then something like this wasn't already built for CakePHP.

So first, the javascript:

var hash = '';
window.setInterval(function() {
    if(hash != location.hash) {
        hash = location.hash;

        if(hash.indexOf('#!/') != -1) {
            var url = hash.substr(2);

            $('#my-div').load(url);
        }
    }
}, 300);

What this does is check to see if the location.hash has changed, if it has, then it checks to see if it starts with #!/. (I.e #!/:controller/:action/:id is the hash that I'm looking for). It then just calls the jQuery load function to load that controller and action.

I then had to modify my links to use the url method in the HtmlHelper.

<?
$hashUrl = $this->Html->url(array(
    'controller' => 'categories',
    'action' => 'view',
    $category['Category']['id']
));

echo $this->Html->link($category['Category']['title'], '#!' . $hashUrl);
?>

This creates a string for the controller and action, then appends it to #! in the link method. Doing it this way, may seem quite long winded (You could probably write a custom helper to make it one line) but it allows you to change the URLs in the config/routes.php later on. You end up with a url like this: #!/categories/view/2

Lastly, you need to make sure that in your controllers you have this at the end of each of method you use.

$this->render('view', 'ajax');

I'm not imagining that this is a perfect solution, but it does the job quite nicely at the moment. Open to suggestions for improvement too.

岛歌少女 2024-11-12 09:38:57

有一些开源项目可能可以帮助您。这是一个很好的起点:https://github.com/browserstate/history.js

There are open source projects that may be able to help you along. Here's a good starting point: https://github.com/browserstate/history.js

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文