javascript - Yii renderPartial 与外部 javascript

Question

我有一个页面 View ，它进行 ajax 调用并使用 renderPartial 更新页面内容。

所以 page.php -> _pagePartial.php (ajax 更新)

在 page.php 中，我想包含一次 javascript 文件，然后在 ajax 渲染发生后应用 DOM 修改。在每次 AJAX 刷新时加载这个 JS 文件是没有意义的。

例如在 page.php 中

$baseUrl  = Yii::app()->baseUrl;
$basePath = Yii::app()->basePath;
$cs       = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js'); // load one time! 

然后在pagePartial.php

    // every ajax partial load
    $('#sortable-list-left').sortable({
                connectWith:'.productEntryCol',
                placeholder: 'ui-state-highlight',
                update: function(event, ui) {
                    var sortOrderLeft = getSortOrder('sortable-list-left');
                    var sortOrderRight = getSortOrder('sortable-list-right');
                    var projectId =  '" . $project_id . "';
                    $.ajax({
                        data: { left: sortOrderLeft, right : sortOrderRight,  id : projectId},
                        url: '/project/ajaxUpdateOrder',
                        type: 'POST',
                        success: function(response){
                          // process JSON response
                          var obj = jQuery.parseJSON(response);
                        }
                    });
                 }
            });

问题是 _pagePartial 通过 AJAX 加载后，无法使用 .sortable() 方法。

处理这个问题的正确方法是什么？

谢谢

Answer 1

我处理此问题的方法是在 $.load 或 $.ajax 或其他任何内容的主视图上，将代码添加到 success 函数中。

例如:

$.get('_pagePartial.php', null, function(html) {
    $('#result').html(html);
    $('#sortable-list-left').sortable({
        //all your sortable code
    });
});

另一种选择是将 ajax 加载页面 ('_pagePartial.php') 上的 javascript 添加到如下函数中:

function firejs() {
    $('#sortable-list-left').sortable({
        //all your sortable code
    });
}

然后在主视图('page.php')上成功进行 ajax 调用时，只需添加以下内容:

$.get('_pagePartial.php', null, function(html) {
    $('#result').html(html);
    firejs();
});

您可以绑定(bind)到一个对象，直到它被添加到 DOM 中，并且在 ajax 调用成功完成并将结果添加到 DOM 中之前，它不会被添加到 DOM 中。

另外仅供引用 yii 内置了 jqueryui 你可以简单地说:

Yii::app()->clientScript->registerCoreScript('jquery.ui');
Yii::app()->clientScript->registerCoreScript('jquery');