使用尔康标签动态加载CSS和JavaScript文件

我想这个问题可能具有相同的结果作为How do I use "Main Layout" views in a multi module Phalcon application?使用尔康标签动态加载CSS和JavaScript文件

我主要布局观点有我的整个应用程序的基本HTML结构和我使用的控制器布局查看来呈现该控制器的内容。我相信我到目前为止做得很好？

但是现在我有一个问题，需要加载与我的主版面视图中的模块控制器相关的特定JS和CSS文件。

目前我在我的主版面文件中加载所有CSS和JS，但这完全违背了多模块方法。每个模块都应该能够加载css/js文件，而无需修改核心布局文件。

理想我很乐意遵循相同的方法设置页面标题

控制器： 尔康\标签:: setStylesheetLink（ “http://fonts.googleapis.com/css?family=Rosario”，假）;

观看次数： echo Phalcon \ Tag :: getStylesheetLink（）;

有没有其他方法可以完成这个我可能会失踪的问题？

来源

2012-11-07 Tim

目前没有办法创建某种排序功能（样式表按照您设置的顺序打印出来），或者您只需将样式表添加到\Phalcon\Tag::stylesheetLink()并且可以将其打印出来的收集工具。

但是你可以实现你需要的自定义类什么如下：

在你的config.ini你有这部分

[resource] 
css.bootstrap = "/public/css/bootstrap.css" 
css.index  = "/public/css/index.css" 
css.about  = "/public/css/about.css" 
css.contact = "/public/css/contact.css"

创建一个类\MyApp\Tag

namespace MyApp; 

class Tag 
{ 
    private $_css = array(); 

    public function add($css) 
    { 
     $this->_css[$css] = true; 
    } 

    public function remove($css) 
    { 
     $this->_css[$css] = false; 
    } 

    public function clear() 
    { 
     $this->_css = array(); 
    } 

    public function generate() 
    { 
     $config = \Phalcon\DI::getDefault()->get('config'); 
     $output = ''; 

     foreach ($this->_css as $css => $active) 
     { 
      if ($active) 
      { 
       if (isset($config->resource->css->$css)) 
       { 
        $output .= \Phalcon\Tag::stylesheetLink($config->resource->css->$css); 
      } 
     } 

     return $output; 
    } 
}

然后在您的控制器中，您可以执行如下操作：

$style = new \MyApp\Tag(); 
$style->add('bootstrap'); 
$style->add('about'); 

$this->view->setVar('stylesheets', $style->generate();

，并在您的视图：

<?php echo $stylesheets; ?>

来源

2012-11-07 05:33:40

你好尼可拉斯，对不起，这么长时间来回应，我一直在玩弄项目。不幸的是，我在调用这个类时遇到了问题。我应该将它添加到DI吗？目前我只是像上面这样调用它，而我的错误是：PHP致命错误：找不到'MyApp \ Tag'类。我明显地将“MyApp”替换为我的应用程序的名称，但我想不出我做了什么错？ – Tim

@Tim您需要注册“MyApp”命名空间以便找到它。你可以将它命名为任何你喜欢的东西。如果将它添加到DI容器中，您只需要：'$ obj = \ Phalcon \ DI :: getDefault（） - > get（'mytag'）'。如果时间不是问题，那么你可能要等到12月初，0.7出局。该功能包含在该版本中。 –

嗨尼古拉斯，我发现了问题，我没有在自动加载器中注册名称空间。奇妙的是，这个功能将很快建成！快速的问题来帮助我学习。在上面这个类中，我遇到了另一个致命错误，“在对象上下文中不使用$ this时”：foreach（$ this - > _ css as $ css => $ active）。我不明白这里发生了什么？我真的很感谢你的见解。 Ack！ – Tim

这里有一个方法可以手动控制你的JS和CSS文件资源的顺序。

首先，在控制器添加CSS和JS路径时，使用自动尔康\资产\收集容器来存储您的ad-hoc资产：

$this->assets->addJs('js/bootstrap-multiselect.js'); 
$this->assets->addCss('css/bootstrap-multiselect.css');

在您的自定义BaseController从所有的控制器扩展，添加一个afterExecuteRoute（）公共方法：

一旦我们确信当前的路线执行完毕，我们可以从尔康\资产自动js和css藏品拉特设资产\经理，将它们附加到我们的常见组合列表中牛逼的文件，为了和去重它们，然后把它们放到新的自定义类别：

// get list of js files added to the standard js collection 
$append_js = array(); 
forEach($this->assets->getJs() as $js){ 
    $append_js[] = $js->getPath(); 
} 
// declare paths to common js assets 
$js_assets = array(
    'js/jquery-2.1.1.min.js', 
    'js/jquery-ui.min.js', 
    'js/bootstrap.min.js', 
); 
// merge common paths with ad-hoc paths 
$js_assets = array_merge($js_assets, $append_js); 
$js_assets = array_unique($js_assets); // dedup 
// add js assets to a new collection 
$js_collection = $this->assets->collection('header_js'); 
forEach($js_assets as $js_path){ 
    $js_collection->addJs($js_path); 
}

重建CSS资产注入一个新的集合的工作方式相同：

// get list of css files added to the standard css collection 
$append_css = array(); 
forEach($this->assets->getCss() as $css){ 
    $append_css[] = $css->getPath(); 
} 
// declare paths to common css assets 
$css_assets = array(
    'css/jquery-ui.min.css', 
    'css/jquery-ui.theme.min.css', 
    'css/jquery-ui.structure.min.css', 
    'css/bootstrap.min.css', 
    'css/bootstrap-theme.min.css', 
    'css/main.css', 
); 
// merge common paths with ad-hoc paths 
$css_assets = array_merge($css_assets, $append_css); 
$css_assets = array_unique($css_assets); // dedup 
// add css assets to a new collection 
$css_collection = $this->assets->collection('header_css'); 
forEach($css_assets as $css_path){ 
    $css_collection->addCss($css_path); 
}

最后，当你输出你的js和css资产在您的模板，输出新的自定义集合，而不是默认集合了尔康\资产\ Manager会自动创建：

{{ getDoctype() }} 
<html> 
    <head> 
     {{ tag.getTitle() }} 
     {{ assets.outputCss('header_css') }} 
     {{ assets.outputJs('header_js') }} 
    </head>

来源

2014-10-16 00:05:54 hanmari

使用尔康标签动态加载CSS和JavaScript文件

回答

相关问题