应用程序
在PHP中,我会输出一些初始视图,这样网络爬虫就可以抓取我的网站:
----------------
| cool view 1 |
----------------
| cool view 2 |
----------------
| cool view 3 |
----------------
| Load more |
----------------
Javascript还需要动态生成相同的视图。当用户点击"加载更多"按钮时,它会对服务器进行AJAX操作,并将结果附加到页面上:
----------------
| cool view 1 |
----------------
| cool view 2 |
----------------
| cool view 3 |
----------------
| cool view 4 |
----------------
| cool view 5 |
----------------
| cool view 6 |
----------------
| Load more |
----------------
当前实施
目前,我的PHP视图和JS视图是分开编写的。下面是一个使用CodeIgniter框架加载假设PHP视图的示例。
view.php
<?php
<div>
<span>cool view</span>
<span><?=$id?></span>
</div>
?>
controller.php
$this->load->view(
'view',
array('id' => '999')
);
这里有一个AJAX的例子,用Prototype框架加载假设的视图。
ajax.php
echo json_encode(
array('id' => random())
);
view.js
MyView = Class.create({
initialize: function(id) {
var div = new Element('div');
var span0 = new Element('span').update('cool view');
var span1 = new Element('span').update(id);
div.appendChild(span0);
div.appendChild(span1);
return div;
}
});
controller.js
new Ajax.Request(
'/index.php/someController/someMethod', {
onSuccess: function(transport) {
var response = transport.responseText.evalJSON();
$('viewsContainer').appendChild(
new MyView(response.id)
)
}
}
);
需要更清洁的解决方案
我需要一种在PHP和JS之间共享HTML模板的方法,而无需重写所有内容。在我的实际项目中,我有几十种观点。在PHP和JS中复制视图代码似乎很难维护。我没有采用PHP直接将HTML打印到AJAX的廉价方法,因为1)包含HTML标记会有额外的大小开销,2)它与客户端无关——也就是说,非浏览器客户端无法理解输出,3)它不允许JS在视图中的子视图上干净地附加侦听器。
您可以直接向浏览器提供最终的html:
if(<request is from ajax>)
echo $this->load->view('view', array('id' => '999'), false);
最后一个参数false
将视图加载到一个变量中,在这种情况下返回它…
然后,在javascript方面,您只需创建一个新的div
,并将其innerHTML
设置为response.text
我认为你不需要老式的方式。为什么不使用一个模板引擎,如胡子1?这样一来,您就不会有大量的HTML开销,并且仍然可以发送只包含id的瘦json(10个字符对50个字符,您的情况甚至不需要标记)。