使用爾康標籤動態加載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文件

回答

相關問題