如何使用Zend Framework制作基于AJAX的GUI

I have a application built using Zend Framework. I have decided to go with JQuery instead of Dojo. I do use the ZendX helpers for stuff like ajaxLinks and dialogContainers. I want to try and make the GUI as AJAX driven as possible. But I struggle with deciding on what I feel is the best approach. Most of the time it's a matter of loading a "page" into a dialogContainer instead of reloading the entire page. So that you for instance get a dialog containing a form for changing some user data or something similar.

我有一个使用Zend Framework构建的应用程序。我决定使用JQuery而不是Dojo。我确实使用ZendX帮助程序来处理ajaxLinks和dialogContainers之类的东西。我想尽可能地将GUI作为AJAX驱动。但我很难决定我认为最好的方法。大多数情况下,将“页面”加载到dialogContainer而不是重新加载整个页面是一个问题。例如,您可以获得一个对话框,其中包含用于更改某些用户数据或类似内容的表单。

At first I returned the entire page but if it was requested using an AJAX request it used a different layout template to avoid all unenecerry javascript inclusions etc. This enabled my to build one version of a page that would basicly be browsable like normal AND via AJAX. But I haven't conviced myself that I like this. Looking at Zend Server GUI they seem to do this though and not return json encoded data and building the page from that.

起初我返回了整个页面,但是如果它是使用AJAX请求请求它使用不同的布局模板来避免所有不兼容的javascript包含等。这使我能够构建一个版本的页面,基本上可以像普通和通过AJAX一样浏览。但我没有说服自己,我喜欢这个。看看Zend Server GUI,他们似乎做了这个,但没有返回json编码数据并从中构建页面。

What would be the best approach for this and how should I handle javascript that is specific to the retrived page? I now have all the page specific javascript in the phtml file of that page.

什么是最好的方法,我应该如何处理特定于reived页面的javascript?我现在在该页面的phtml文件中拥有所有页面特定的javascript。

Another thing I'm concerned about is how to keep track of the resources created when opening a lot of dialog containers and populating them via ajax. Say we open one dialog and in that we get a list of items. If we click one yet another modal dialog container popsup for that specific item and is populated via ajax. But if the main page is never reloaded I can see this becoming hard to handle.

我关心的另一件事是如何在打开大量对话框容器并通过ajax填充它们时跟踪创建的资源。假设我们打开一个对话框,然后我们得到一个项目列表。如果我们单击该特定项目的另一个模态对话框容器弹出窗口并通过ajax填充。但如果主页永远不会重新加载,我会发现这很难处理。

Feels like I can't be the first one to wanna do an ajax driven UI so please point me in the right direction before I paint myself into a corner. ;)

感觉就像我不能成为第一个想要做一个ajax驱动的用户界面的人所以请在我把自己画到角落之前指出正确的方向。 ;)

Update: I basicly tried all kinds of tutorials I could find on the context subject as well as the documentation at Zend. I think I must have missed to enable some undocumented feature or something. Since it didn't work I deleted the code, but trying to find the examples I looked at before I tried stuff like the bellow code.

更新:我基本上尝试了我可以在上下文主题上找到的各种教程以及Zend的文档。我想我一定错过了启用一些未记录的功能或其他东西。由于它不起作用,我删除了代码,但在尝试像波纹管代码之类的东西之前,试图找到我看过的例子。

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('list', 'html')
            ->addActionContext('modify', 'html')
            ->initContext();

And I tried something like the following

我尝试了类似下面的内容

$this->_helper->contextSwitch()
     ->setContext('html', array(
                 'suffix'    => 'html',
                 'headers'   => array('Content-Type' => 'text/html; Charset=UTF-8'),
)
         )
     ->addActionContext('index', array('html','xml', 'json'))
     ->setAutoJsonSerialization(true)
     ->initContext();

I tried adding other ActionContexts etc but no matter what all of them just ended up rendering the normal .phtml file all the time.

我尝试添加其他ActionContexts等,但无论它们是什么,最终都会一直呈现正常的.phtml文件。

1 个解决方案

#1

Here's what I learned when I was making my ZF/Ajax app.

这是我在制作ZF / Ajax应用程序时学到的内容。

For HTML Data:

对于HTML数据:

You can use ActiionContext action helper (ZF Reference). You can add an AJAX context to your actions. I use this in controller's init() function.

您可以使用ActiionContext动作助手(ZF参考)。您可以为操作添加AJAX上下文。我在控制器的init()函数中使用它。

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('myaction', 'html')->initContext('html');

What this does is, when calling myactionAction(), it will check if the request is made through an AJAX call. If it is, it disables the layout, and renders "myaction.ajax.phtml" rather than "myaction.phtml" as it would if it wasn't an AJAX call. This way, you can get a clean HTML output from an action without anything extra, you don't have to write a Request-Type checking code in each action. I found it generally easy work with.

这样做,当调用myactionAction()时,它将检查是否通过AJAX调用发出请求。如果是,它会禁用布局,并呈现“myaction.ajax.phtml”而不是“myaction.phtml”,如果它不是AJAX调用那样。这样,您可以从操作中获得干净的HTML输出,而无需额外的任何操作,您不必在每个操作中编写Request-Type检查代码。我发现它通常很容易使用。

If the content you are loading carries additional javascript with it, don't forget to add it to your view and echo it as well.

如果您要加载的内容带有额外的javascript,请不要忘记将其添加到您的视图中并回显它。

$this->headScript()->appendFile("/js/list.js");
echo $this->headScript();

That JavaScript then executes as it normally would.

然后JavaScript会像往常一样执行。

For JSON Data

对于JSON数据

JSON Action Helper is very quick and easy to use in an action to return JSON data.

JSON Action Helper在动作中非常快速且易于使用以返回JSON数据。

$r = "Success"; 
$this->_helper->json($r);

This also returns pure JSON and nothing else.

这也返回纯JSON,没有别的。

I guess a little more specific question would help you get better answers.

我想一个更具体的问题可以帮助你获得更好的答案。

#1