Question

我是Salesforce Apex的新手，并在一些细微差别上苦苦挣扎。我的问题是所有Salesforce组件（如knowledge:categoryList或knowledge:articleList）在渲染时都包含额外的span元素，这远远不是最初需要的。比如：

<ul>
    <span>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </span>
</ul>

至少在语义上是错误的，但在使用像Bootstrap这样的库时，它们还会破坏标记。这有解决方案吗？或者在某些时候我错了？

UPD 小例子：

此...

<ul class="nav nav-tabs" role="tablist">
    <knowledge:categoryList categoryVar="category" categoryGroup="Help" rootCategory="Using_{!selectedCategory}" level="1">
        <li role="presentation">
            <a href="#{!category.name}" aria-controls="basics" role="tab" data-toggle="tab">{!category.label}</a>
        </li>
    </knowledge:categoryList>
</ul>

...呈现为......

<ul class="nav nav-tabs" role="tablist">
    <span id="j_id0:j_id1:j_id37"> // <!-- how to remove this wrapper? -->
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">One</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Two</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Three</a>
        </li>
    </span> <!-- ??? -->
</ul>

Answer 1

目前无法配置如何在页面上呈现Visualforce标记。

如果你想在SF的前端控制，你应该使用任何JS / CSS库/框架手动开发它，避免使用Visualforce标签。要处理数据并与服务器端进行交互，您可以使用Visualforce Remote Objects或JavaScript Remoting和actionFunctions。

Answer 2

好的，我已经设法通过小型jQuery片段解决了这个问题：

(function ($) { 
    $(document).ready(function () {
        var allSpansAndDivs = $('span, div');
        $.each(allSpansAndDivs, function (index, elem) {
            if ($(this).attr('id') != undefined && $(this).attr('id').indexOf('j_') > -1) {
                $(this).children().first().unwrap();
            }
        });
    });
})(jQuery);

避免使用<span>元素包装Salesforce Apex组件

2 个答案: