如何避免回顯大片的javascript

在我的（MVC）視圖中，我有一個循環，爲循環的每個實例創建一個小的浮動圖（javascript）。

<?php 
for each ($catalog as $book) { 
    echo "<li>"; 
    echo anchor('controller/manager/'.$key['Title']) . ' is available'; 

     // flot javascript goes here to generate a small graph for this list item 

} 
unset ($book);  ?>

循環本身是PHP，JavaScript的大概是50行左右的代碼，我從一些樣品別處發展。

因此，爲了讓代碼在這個視圖中工作，我需要echo出每一行，否則我打破每個循環的，當我在javascript開始之前終止PHP並重新decalre php在JavaScript完成後。

什麼是更有效的方法呢？

來源

2013-10-21 Maxcot

使用不顯眼的JavaScript代替將內聯JavaScript耦合到後端代碼會更好。

來源

2013-10-21 21:56:43

OK，我在這一個總的小白...你可以給我一個指針？ – Maxcot

找到了：http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript – Maxcot

理想的做法是將大部分JS代碼放入單獨的外部文件中，並使用腳本標記將它們鏈接到視圖文件中。腳本標籤可以在HTML頭部或在關閉正文標籤之前。由於頁面加載時間通常更快，我更喜歡後者。jQuery使得以這種方式編寫JS更容易B/C它提供了簡單的跨瀏覽器方法來將事件綁定到DOM元素。它還有一個.ready（）方法，您可以將代碼包裝進來，以確保在執行代碼時DOM已準備就緒。模塊模式也很好融入。 –

使用heredocs可以更容易地回顯大塊文本/代碼。如果您需要在JavaScript中使用PHP變量，PHP仍然會解析該塊。

http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

$some_javascript = <<<_JS 
some mulit- 
line text 
<<<_JS

來源

2013-10-21 22:08:21 Billy

您可以使用短標記從您的控制器養活數據視圖中的JavaScript部分。

例如，我們使用在視圖下面的JavaScript代碼：

var assign_data = [ 
    {label : "Single", data:<?= $single_num ?>}, 
    {label : "Barcode", data:<?= $barcode_num ?>}, 
    {label : "Template", data:<?= $template_num ?>} 

];

對於這個圖中，我們然後抓住從模型中的相應數量的，並然後將其指定的對應的短標記以得到由海軍報渲染。因此，對於$ barcode_num，我們使用下面的代碼：

$data['barcode_num'] = $this->history_model->get_barcode_assign_num($this->org_id);

我們也建立一個格式化字符串中一個控制器，提供海軍報的數據也是如此。一個控制器方法的輸出示例爲條形圖提供了此示例字符串。：

  data: [ [144,4],[157,0],[138,0],[145,0],[149,0],[141,0],[137,3],[155,0],[150,0],[142,0],[148,0],[140,0],[146,0],[152,0],[153,0],[147,1],[143,0],[156,0],[139,1],[154,0],[151,0] ]

來源

2013-10-21 22:09:56

您可以使用hmtl5數據屬性來傳遞圖表的度量。您可以使用庫將數據綁定到這些元素，例如knockout.js或的angular.js，然後在JavaScript客戶端上工作，就像Neil說的那樣。

的觀點：

<ul id="book-graph"> 
    <?php foreach($books as $book): ?> 
     <li id="book_id_<?php echo $book->id;?>"> 
      <span id="graph" data-bind="metric : <?php echo $book->metric;?>">&nbsp;</span> 
     </li> 
    <?php endforeach; ?> 
</ul>

// jQuery的實例

(function($){ 

    var GraphAPI = { 
     init : function(){ 
      if($("#book-graph")) 
       this.drawBookGraph(); 
     }, 
     drawBookGraph : function(){ 
      //Your graph code 
     } 
    }; 

    $(function(){ 
     //Load up your graph API when your ready 
     GraphAPI.init(); 
    }); 

}(jQuery));

來源

2013-10-22 00:31:01 Philip

如何避免回顯大片的javascript

回答

相關問題