嵌入式Javascript与无脂布局

我正在使用PHP Fat Free，并试图创建一个布局/子布局系统，它最终会在某种程度上模仿MVC。我有一个拥有占位符的主布局（实质上后端设置了不同的子布局或部分文件路径，然后视图负责调用该文件名的渲染），这一切都很好。嵌入式Javascript与无脂布局

我遇到的问题是当我需要在我的sublayout中的内联JavaScript运行在主布局的脚本后（例如，在jquery include行之后）在我以前使用的框架中，我能够输出缓冲ob_start和ob_get_clean来抓取在sublayout然后脚本传递到布局以显示脚本线以下，我希望这是有道理的，但如果没有，这里是当前的代码，我在F3工作

路线：。

$f3->route('GET /test', 
    function($f3) { 
     // set the sublayout name 
     $f3->set('sublayout', 'testpage.php'); 

     // render the whole shebang 
     echo View::instance()->render('testlayout.php'); 
    } 
);

布局：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Layout</title> 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <?php echo View::instance()->render($sublayout) ?> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" /> 
    <!-- inline script should go here --> 
</body> 
</html>

的sublayout：

<h2>My Test Page</h2> 
<div id='message'></div> 

<script> 
    // This code needs to be placed AFTER the jquery include in the main layout 
    $(function(){ 
     $('#message').html('This is my message'); 
    }); 
</script>

我试图延伸的视图为包括 “beginRegion”，并且基本上处理的ob_start和ob_get_clean部分，使得endRegion功能我的内联脚本可以被选中，但是一旦我在子布局中，我无法弄清楚如何将缓冲的代码传递回布局，以便在jquery包含之后它可以被echo'd。

在你告诉我不应该使用内联脚本之前，我知道这一点，而且我所做的大部分事情都在外部脚本文件中，我有一个包含的解决方案，但有时我需要内联脚本，我卡住了。

有没有办法来处理我想要做的输出缓冲，或者更好的是有没有比输出缓冲方法更好的解决这个问题的方法？

更新： 最佳做法通常决定了你应该包括在页面底部的脚本的结束标记之前。如果我将脚本放在sublayout的上方，它会破坏我们的FE最佳实践，并且在脚本下载时阻塞页面的其余部分。这就是为什么我想保持结构的方式，我已经注意到，而不是把jquery包含在子布局之上。

来源

2015-06-02 tjans

我不明白是什么问题。您的布局是：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Layout</title> 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <?php echo View::instance()->render($sublayout) ?> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" /> 
    <!-- inline script should go here --> 
</body> 
</html>

您要包括jQuery的使用后sublayout。那么为什么不写这样写呢？：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Layout</title> 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" /> 
    <!-- inline script should go here --> 
    <?php echo View::instance()->render($sublayout) ?> 
</body> 
</html>

此外，您可以编写自定义函数。比方说，你用谐音或其他更结构化的东西文件夹已经和想使用它：

$f3->set('partial', 
    function($file) { 
     $file .= (strpos($file, '.php')>0)? '' : '.php'; 
     if(!is_file($file)) return ''; 
     return View::instance()->render($file); 
    } 
);

，然后用它喜欢：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Layout</title> 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" /> 
    <!-- inline script should go here --> 
    {{ @partial('partials/testpage') }} 
</body> 
</html>

来源

2015-06-02 14:15:27 num8er

感谢您的回复。我应该澄清一下，并回答你的问题：“那么为什么不把它写成这样？”最佳做法通常规定您应该在关闭正文标记之前的页面底部包含脚本。如果我将脚本放在sublayout的上方，它会破坏我们的FE最佳实践，并且在脚本下载时阻塞页面的其余部分。我会把它添加到原来的帖子来澄清这一点，thx为部分的例子。我确信将来我会使用它。虽然，我不得不适应它，因为我没有使用F3模板 – tjans

我知道你为什么要这么做。但是，如何将scripts.php文件中的脚本和HTML，php部分分离到另一个文件并根据需要呈现它们，会出现什么问题？（：

来源

2015-06-02 14:49:45 num8er

是的，这是一个选项，也是我之前设想的一个选项。最后，这可能是处理它的方法，尽管我试图将内联代码保留在正在操作的相关标记旁边，而不必跳转到外部文件以查看它。否则，用你提出的解决方案，我可能只是把它放在一个外部的.js文件中，并以这种方式包含它（正如我提到的，我有一个解决方案来拉取js文件，而不是内联文件）。 – tjans

保持单独的文件布局代码和js文件，最后我将所有js部分缩小并在底部包含一个js文件。 – num8er

同意，99％的时间也是我所做的。有时我会包含内联JS，如果必须使javascript成为动态的，就像将数据库ID从PHP传递到脚本一样。 – tjans

从谷歌组讨论中，我有，有人提出了一个JS的解决方案，可能的工作：

<head> 
    <script> 
    var callbacks=[]; 
    </script> 
</head> 
<body> 
    <script src="...jquery.min.js"/> 
    <script> 
    $.each(callbacks,function(i,func){func.call(null,jQuery);}) //<< triggers all queued callbacks 
    </script> 
</body>

您sublayout内：

<h2>My Test Page</h2> 
<div id="message"></div> 
<script> 
    callbacks.push(function($){ 
    //do something with jQuery 
    }); 
</script>

布局内

以下是链接： https://groups.google.com/forum/#!topic/f3-framework/iGcDuDueN8c

来源

2015-06-02 15:12:09 tjans

这个gg讨论还提供了一个使用输出缓冲和javascript解决方案的方法。我将把这个标记为答案，因为它直接用两个可行的解决方案来解决原始问题的所有问题。感谢@ num8er以及他的帮助。 – tjans

嵌入式Javascript与无脂布局

回答

相关问题