[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-omekasviewmodel的終端terminal模式":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},64,"omekasviewmodel的終端terminal模式","[OmekaS]viewModel的終端(Terminal)模式","viewModel的終端(Terminal)模式 剛好寫了一個模組有用到這個功能，所以筆記一下。在開發模組時， […]","\u003Ch1>viewModel的終端(Terminal)模式\u003C\u002Fh1>\n\u003Cp>剛好寫了一個模組有用到這個功能，所以筆記一下。在開發模組時，有些需求是讓某些route透過新分頁、新視窗獨立進行一些作用，這種狀況下會希望view裡面的html內容是脫離原先系統設計。\u003C\u002Fp>\n\u003Ch2>關於OmekaS的viewModel\u003C\u002Fh2>\n\u003Cp>但回頭先簡述一下OmekaS的viewModel，我通常會用於開發模組上，例如api、某些功能頁面等等，透過Controller來呼叫view。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\u002F\u002F比如說某個index\npublic function indexAction()\n    {\n        $view = new ViewModel;  \u002F\u002F呼叫ViewModel\n        $view->setVariable('item', $item);  \u002F\u002F塞入你想在這個view中使用的object\n        return $view;\n    }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>通常會這樣來宣告，然後你從對應的route位置取得的phtml中看到成果。(例如item會傳到對應的phtml，直接透過$item來用)\u003C\u002Fp>\n\u003Cp>而這樣的做法，頁面內容會包在原先的layout下。回到開頭所說，如果我們希望讓頁面具有獨立性的話要怎麼做呢？\u003C\u002Fp>\n\u003Ch2>使用終端(Terminal)模式\u003C\u002Fh2>\n\u003Cp>對，就是本次教學的內容，使用Terminal模式，就先稱呼為終端模式吧。使用方式很簡單，如下。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">public function indexAction()\n    {\n        $view = new ViewModel;  \n        $view->setVariable('item', $item);  \n        return $view->setTerminal(true); \u002F\u002F最後要這樣宣告\n    }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>使用上述做法，就能讓這個view脫離原先layout的控制，變成完全獨立的頁面囉。但要注意，因為脫離原本的layout，所以有些基本資訊要自己重新宣告，像是引用script啦、meta啦之類的，都要自己重新加上去喔。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\u002F\u002F範例如下，不然你只會呼叫到完全空白的頁面\n<?php\n$translate = $this->plugin('translate');\n$this->headMeta()->setCharset('utf-8');\n$this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1');\n$this->headLink()->prependStylesheet('\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Source+Code+Pro|Lato:400,400italic,700,700italic');\n$this->headTitle($this->setting('installation_title', 'Omeka S'))->setSeparator(' · ');\n$this->headLink()->appendStylesheet($this->assetUrl('css\u002Ficonfonts.css', 'Omeka'));\n$this->headScript()->prependFile($this->assetUrl('vendor\u002Fjquery\u002Fjquery.min.js', 'Omeka'));\n?>\n<?php echo $this->doctype(); ?>\n<?php echo $this->htmlElement('html')->setAttribute('lang', $this->lang()); ?>\n    <head>\n        <?php echo $this->headMeta(); ?>\n        <?php echo $this->headTitle(); ?>\n        <?php echo $this->headLink(); ?>\n        <?php echo $this->headStyle(); ?>\n        <?php echo $this->headScript(); ?>\n    <\u002Fhead>\n    <?php echo $this->htmlElement('body')->appendAttribute('class', 'minimal'); ?>\n        <?php echo $userBar; ?>\n    <\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>我第一次寫的時候不知道要重新宣告引用的資源，花了好多時間研究為什麼自行引用\u003Cstrong>prependFile\u003C\u002Fstrong>的資源出不來XD\u003Cbr \u002F>\n因此稍微筆記一下，希望有幫助。\u003C\u002Fp>\n","2022-06-29T20:00:17","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F05%2FOmekaBadge.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"omekas","\u002Fblog\u002Fomekasviewmodel的終端terminal模式",1]