是否有一种标准的方式来处理仅在MVC中的一个视图中使用的javascript?

时间:2011-06-23 03:56:45

标签: php jquery codeigniter templates

这是我第一次尝试MVC。我正在使用Code Igniter作为MVC以及前端的jQuery和jQueryUI。我有MVC的基本想法,我有一个工作站点。但从概念上讲,我想确保在MVC理念方面尽可能保持僵化。

我有一个主皮肤视图,然后使用load->view("skin", $contents),其中$contents是一个包含其他视图的关联数组。

因此,我有一个页面(称为“管理控制台”),其中调用皮肤视图,$content包含更多HTML。我想只在该页面上使用jQueryUI对话框。为了创建这个,我有一个<script>标签,其中包含管理控制台视图中的javascript对话框。最终在一堆HTML中间放置一个<script>标记,其中包括最终页面的呈现时间。

这样做的最终结果是我懒得加载javascript但它可能导致多个jQuery $(document).ready(function(){...});调用。

我有一切正常,但我不确定我的实现是否适用于MVC原则。是否更好地使用我正在使用的方法,其中javascript仅在使用时加载或者我应该将javascript放在其他地方?我是用鼹鼠山造山吗?


我的相关控制器代码:

function index(){
$tree = $this->mainModel->getUnitTreeMeta();
$treeOutput = $this->load->view('unit_tree', array('units' => $tree), TRUE);
$pages = $this->mainModel->getPages();

$console = $this->load->view('admin_console', array('units'=>$tree, 'pages'=>$pages), TRUE);

$content = array(
    'title'         =>  'Admin Console',
    'css'           =>  link_tag(array('href' => 'css/admin.css', 'rel' => 'stylesheet', 'type' => 'text/css', 'media'=> 'screen'))."\n",
    'navbar'        =>  'navbar',
    'content'       =>  $console,
    'rightSidebar'  =>  $treeOutput,
    'footer'        =>  ''
);

$this->load->view('skin', $content);
}

skin.php包含行<?=$content?>,它是admin_console视图中包含的HTML / JS:

<div>
    <div>
        ...
        <a href="" id="addUnit" class="smallLinks">Add a New Unit</a>
    </div>
</div>

<!-- DIALOG BOXES -->
<div id="addUnitDialog" title="Add A New Unit">
    <?php echo form_open('admin/add_unit'); ?>
    Unit Name: <br />
    <?php echo form_input("unitName", "");?>
    <br />
    Content: <br />
    <?php echo form_textarea("content", "");?>
    <?php echo  form_close();?>
    <div id="addUnitResponse"></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $( "#addUnitDialog" ).dialog({
            autoOpen: false,
            minWidth: 680,
            buttons: {
                "add Unit" : function(){
                    var unitName = $("input", this).val();
                    var content = $("textarea", this).val();

                    $.ajax({
                        url : "add_unit",
                        type : "POST",
                        success :function(){
                            location.reload();
                        },
                        error : function(){
                            $("#addUnitResponse").text("error");
                        }
                    });
                }
            }           
        });
        $("a#addUnit").click(function(){
            $( "#addUnitDialog" ).dialog( "open" );
            return false;       
        });
    });
</script>

1 个答案:

答案 0 :(得分:1)

就个人而言,我已经从我的观点中退缩,JS应该永远不会出现在HTML中。但是,我通常做这种事情的方式是在&lt; head&gt;处包含一个“if(isset(...”块。观点:

// You may choose to have non-array implementations...
if(isset($js_array))
{
    foreach($js_array as $file)
    {
        if(strpos($file, '.'))
             echo "<script type=\"text/javascript\" src=\"$file\" />" . PHP_EOL;
        else
             echo "<script type=\"text/javascript\">$file</script>" . PHP_EOL;
    }
}

这里的缺点是它需要控件知道视图如何呈现不同的东西。当然,这可以通过创建一个文件admin.php来修复,文件中有两行:

 $js_array = array('/custom_js.js');
 require_once('skin.php'); //<-- will cause issues if your server does not 
                           //    allow short tags, but CodeIgniter is parsing 
                           //    them for you. (I find that bad anyway...)

您需要致电$this->load->view('admin', $content);,但这只是一个小小的改变。