如何避免回显大片的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

回答

相关问题