Php 带无脂肪布局的内联Javascript_Php_Model View Controller_Fat Free Framework

Php 带无脂肪布局的内联Javascript

php model-view-controller

Php 带无脂肪布局的内联Javascript,php,model-view-controller,fat-free-framework,Php,Model View Controller,Fat Free Framework,我正在使用PHP Fat Free，并试图创建一个布局/子布局系统，最终在某种程度上模拟MVC。我有一个带有占位符的主布局（基本上是后端设置了不同的子布局或部分文件路径，然后视图负责调用该文件名的呈现。这一切都很好我遇到的问题是，我需要在子布局中使用内联javascript来在主布局中的脚本之后运行（例如，在jquery包含行之后）.在我以前使用的框架中，我能够执行输出缓冲ob_start和ob_get_clean，以获取子布局中的脚本，然后将其传递到布局以显示在脚本行下方。我希望这是有意义的

我正在使用PHP Fat Free，并试图创建一个布局/子布局系统，最终在某种程度上模拟MVC。我有一个带有占位符的主布局（基本上是后端设置了不同的子布局或部分文件路径，然后视图负责调用该文件名的呈现。这一切都很好

我遇到的问题是，我需要在子布局中使用内联javascript来在主布局中的脚本之后运行（例如，在jquery包含行之后）.在我以前使用的框架中，我能够执行输出缓冲ob_start和ob_get_clean，以获取子布局中的脚本，然后将其传递到布局以显示在脚本行下方。我希望这是有意义的，但如果没有，下面是我在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>


测试布局
测试布局

次级布局：

<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>

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

我的测试页面
//此代码需要放在jquery包含在主布局中之后
$（函数（）{
$（'#message'）.html（'这是我的消息'）；
});

我尝试扩展视图以包含一个“beginRegion”和endRegion函数，该函数基本上处理ob_start和ob_get_clean部分，这样就可以提取内联脚本，但是一旦进入子布局，我就无法找出如何将缓冲代码传递回布局，以便在jquery include之后可以对其进行回显

在您告诉我不应该使用内联脚本之前，我知道这一点以及我所做的大多数事情都是在外部脚本文件中，我有一个解决方案可以包含这些文件，但有时我需要内联脚本，这就是我遇到的问题

有没有一种方法可以处理我正在尝试的输出缓冲，或者更好的是，有没有一种比输出缓冲更好的方法来解决这个问题

更新：

最佳实践通常要求在结束正文标记之前将脚本包含在页面底部。如果我将脚本放在子布局之上，它会破坏我们的FE最佳实践，并且有在脚本下载时阻止页面其余部分的缺点。这就是为什么我希望保持我的结构注意，而不是将jquery include放在子布局上方。

我不明白问题出在哪里。您的布局是：

<!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>

然后像这样使用它：

<!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>


测试布局
测试布局
{{@partial（'partials/testpage'）}

我知道你为什么要这样做。但是，将scripts.php文件中的脚本和HTML、php部分解耦到另一个文件并根据需要呈现它们有什么问题呢？（在我参加的google groups讨论中，有人提出了一个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>


var回调=[]；
$.each（回调，函数（i，func）{func.call（null，jQuery）；}）//感谢您的回复。我应该澄清一下，并回答您关于“为什么不这样写呢？”最佳实践通常规定，您应该在结束正文标记之前将脚本包含在页面底部。如果我将脚本放在子布局上方，它将破坏我们的FE最佳实践，并且具有在脚本下载时阻止页面其余部分的缺点。我会将此添加到原始帖子中，以澄清此point和thx作为部分示例。我相信我将来会使用它。不过，我必须调整它，因为我没有使用F3模板，这是一个选项，也是我以前考虑过的。最后，这可能是处理它的方法，尽管我试图将内联代码保留在它正在操作的相关标记旁边，而不是必须跳转到外部文件才能查看它。否则，对于您提出的解决方案，我可能会将其放入一个外部.js文件中，并以这种方式包含它（正如我提到的，我有一个拉入js文件的解决方案，而不是内联文件）另外，我总是在单独的文件中保存布局代码和js文件，最后我缩小了所有js部分，并在底部包含一个js文件。同意，99%的时间我也是这样做的。有时，如果我必须让javascript是动态的，我会包含内联js，比如将数据库ID从PHP传递给脚本。这个gg讨论还提供了一个方法使用输出缓冲和javascript解决方案。我将把它标记为答案，因为它用两个可行的解决方案直接解决了原始问题的所有问题。感谢@num8er以及他的帮助。
<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>

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