如何使用 javascript 将刀片语句附加到 div？答案

【问题标题】：how to append blade statements to a div using javascript?如何使用 javascript 将刀片语句附加到 div？
【发布时间】：2019-11-15 05:35:08
【问题描述】：

如果我们有以下结构， js 中无法识别 id 变量。怎么了？我的意思是，如何在刀片语句的 where 条件中使用 id 变量？同时，刀片语法可以正常工作，但我不知道如何将 id 变量传递给它。它假设 id 变量等于零！！！

<body>
    <div class='fake' id='test'>

    </div>

    <script>
        $('.fake').hover(function() {
            var id = this.id;
            var content = "<ul>"+
                "@foreach(DB::table('category')->where('parent_id', 'id')->get() as $childCat)"+
                "<li>"+
                "{{$childCat->name}}"+
                "</li>"+
                "@endforeach"+
                "</ul>";
        }, function() {
        });

        $('#'+id).append(content);
    </script>
</body>

【问题讨论】：

Appending Laravel Blade from JQuery的可能重复

标签： jquery laravel laravel-blade

【解决方案1】：

到页面加载时，blade 已经编译好了。所以我怀疑这是可能的。即使有可能，这一行也应该是这样，注意id 在字符串中被连接。

"@foreach(DB::table('category')->where('parent_id', '"+id+"')->get() as $childCat)"+
//also
@endfoeach instead of {{endforeach}}

我认为您应该考虑寻找一种替代方法来实现此逻辑。正如其中一个 cmets 所指出的，您也许可以使用 ajax 来拉取预渲染的组件。发送'id' 并获取子类别列表。

【讨论】：

谢谢，但我想在 jquery 中做，而不是用 ajax 方法。我不知道如何连接 id 变量来工作？我花了很多时间来解决这个问题，但我无法在 js 中找到解决方案！
如果刀片确实有效，正如您在编辑中所说，您从哪里获得 id？现在你说 var id = this.id;你有全局ID吗？还是要从 div 中获取 id 属性？在这种情况下，它应该是 $(this).attr('id')，但你的 id 只是说 test。您也许可以包含一个数据属性并在那里传递 id 并获取数据的属性值。
您不能通过 js 将刀片语法附加到内部 html，因为刀片语法在 php 服务器端呈现，它为浏览器提供静态 html。当您尝试通过 js 为您的浏览器附加刀片语法时，它不会理解它并会按原样打印。
@fahim152 OP 坚持刀片语法有效，但我支持你。

【解决方案2】：

您可以像这样使用 jQuery 遍历您的项目

<script>
    $('.fake').hover(function() {
        let ul = $('<ul>')
        let categories = @json(DB::table('category')->where('parent_id', 'id')->get())

        for(let category in categories) {
            ul.append($(<li>).text(category['name']))
        }

        $(this).append(ul)
    });
</script>

【讨论】：

id 变量无法识别！
@amir 请更具体

【解决方案3】：

您的原始帖子的意图有所改变，或者至少已经澄清。本来想用 Blade 生成 JS 好像是可行的，虽然有点别扭。

目前还不清楚你想用id 变量做什么。如果你能解释你想要做什么，那将会很有帮助。

您是否尝试将某些内容从 DOM 传递回 Blade？如果是这样，这是不可能的。 Blade 需要在发送到浏览器之前编译页面 - 但 DOM 仅在浏览器中创建（一旦它接收到页面）。

也许这个例子能说明你的意图是什么？像这样的东西对你有用吗？

// controller passes variable $id into view

<div class='fake' id={{ $id }}></div>   // seems unnecessary, but hey?

<script>
    $('.fake').hover(function() {
        var id = {{ $id }};
        // etc...

【讨论】：

【解决方案4】：

唯一可行的方法是，如果您尝试使用 Blade 生成 JS 代码，然后将其发送到浏览器 - 这就是您想要做的吗？

以下代码非常适合我（根据需要更改表名）：

// displays a list of page 3's children on hovering over the box
<div class="fake" style="width: 300px; height: 300px; background-color: cyan" id='test'>
</div>
<script>
    $(document).ready( function () {
        $('.fake').hover(function() {
            var content = "<ul>"+
                @foreach(DB::table('pages')->where('parent_id', '3')->get() as $page)
                    "<li>"+"{{$page->name}}"+"</li>"+
                @endforeach
                "</ul>";
            this.innerHTML = content;
        });
    });
</script>

另外，您使用的 id 和 content 变量超出了范围。

【讨论】：