我遇到了一个问题,正在寻找解决它的最佳方法而不改变 Yii2 框架。
我有一个页面,其中包含可以排序的元素。我正在使用 yii-jui 可排序小部件,初始视图后一切正常。
在某些情况下,我需要使用每个ajax 的所有元素更新内容。这也有效。
问题是,当我在ajax调用后更新内容时,可排序元素的jquery初始化及其容器会丢失。
构建初始视图时,yii-jui 扩展将用于初始化可排序元素的 javascript 放置在文档就绪函数内的 Javascript 块中。正如我已经说过的,这在第一次查看时效果很好。但是,当我更新内容时,初始化会丢失,并且我需要再次运行 javascript 初始化。我无法执行此操作,因为未触发文档就绪功能。一个可能的解决方案是将可排序元素的所有 JS 初始化放入一个单独的函数中,并在第一个视图之后以及 ajax 更新之后显式调用它。困难在于,我认为无法使用 yii-jui 小部件执行此操作,因为它将所有初始化(事件和选项)作为单个调用放在文档就绪函数中。
我考虑了以下事项:
感谢您的任何意见
安迪·波特
$view->on(View::EVENT_END_PAGE, function($event){
$positions = $event->sender->jsFiles;
foreach($positions as $position => $js){
$new = array_filter($js,
function($item){
return !preg_match('/jquery(\.min)?\.js|yii(\.min)?\.js/i', $item);
});
$event->sender->jsFiles[$position] = $new;
}
});
您可以根据需要过滤任意数量的 js 文件,只需将它们添加到
preg_match
模式即可。
通过“挂钩”视图
EVENT_END_PAGE 事件,我能够更改生成的 Javascript 代码并将其放入函数中。
public function actionIndex()
{
$this->layout = 'main-full';
Yii::$app->getUser()->setReturnUrl(Yii::$app->request->getUrl());
$this->getView()->on(View::EVENT_END_PAGE, [$this, 'jsAsFunction']);
return $this->render('index', [
'board' => $this->currentBoard,
'columnHtml' => $this->getColumnHtml(),
]);
}
public function jsAsFunction($event)
{
$event->sender->js[View::POS_HEAD] = ['var initializeBoard;'];
$event->sender->js[View::POS_HEAD] = ['var longPollingTimeout = ' . self::LONG_POLLING_TIMEOUT . ';'];
$event->sender->js[View::POS_READY] = array_merge(
['initializeBoard = function() {'],
$event->sender->js[View::POS_READY],
['}'],
['initializeBoard();']
);
return true;
}
当视图生成内联 Javascript 时,所有数组元素都会内爆在一起。所以我只是将代码包含在函数声明中。之后,稍后即可使用。
重要
<HEAD>
区域。