使用 JavaScript 將 Laravel 刀片模板附加/添加到當前視圖

Question

所以，我有這個：

item.blade.php （位置：'pages/components/item.blade.php'）

<div>
 // some php logic
test
</div>

list.blade.php

// some laravel blade logic

<script>
    function onAddItem() {

// the code above doesn't work
        $.get("visitor.pages.service.html", function(data){
           $('#appends').append(data);
        });
      }
    }

</script>


<div>
  <button onclick="onAddItem()">add item</button>

  <div id="list">
    @include('pages.components.item', ['someVars'=> false]); //this displays OK
  </div>

</div>

現在我想要做的是當我單擊添加項目按鈕時，它還應該在list (id) div 內添加另一個pages.components.item模板。

我已經嘗試過這些帖子的答案：

• 從 JQuery 附加 Laravel Blade
• https://stackoverflow.com/a/40219813/2784493

但是這兩個答案都不起作用。

Answer 1

正如答案所指出的那樣，您不能這樣做，因為刀片是服務器端處理的。 然而，有一個解決方法，但它很昂貴且容易出現漏洞：創建自定義路由，在需要時輸出所需的刀片文件。

在routes.php ：

Route::get('/blades/{path_to_blade}', function($path_to_blade){
    return view($path_to_blade);
})->where('path_to_blade', '^[a-z0-9\_\-\.]+$');

然后您可以使用 ajax 調用或任何方式來調用請求的模板。 我使用 jQuery 作為演示：

$.ajax({
    url: "/blades/template.path",
    cache: false,
    success: function(html){
        $("#element_in_which_to_insert").append(html);
    }
});

您還可以在瀏覽器中請求模板： /blades/template.path 。 但同樣：這種方法容易出現漏洞。 您應該改用 Vue 或 Angular 等前端框架。

Answer 2

你應該使用

function onAddInvoiceItem()

不是

function addItem()

因為你在這里用onAddInvoiceItem()調用它：

<button onclick="onAddInvoiceItem()">add item</button>