Несоответствие выбора MessageBanner в интерфейсе Office Fabric

У меня проблемы при работе с интерфейсом Office Fabric MessageBanner составная часть. Почему я могу создать элемент, возвращенный как jQuery, так и document.querySelector с ChoiceFieldGroup, но только document.querySelector работает с MessageBanner?

Это файл test.html:

$(document).ready(function () {
    //This works:
    var $ChoiceFieldGroupElements = $(".ms-ChoiceFieldGroup");
    //This also works:
    //var $ChoiceFieldGroupElements = document.querySelector(".ms-ChoiceFieldGroup");

    //This works:
    var $mb = document.querySelector('.ms-MessageBanner');
    //This doesn't work:
    //var $mb = $('.ms-MessageBanner');

    // Just the components' initialization
    for (var i = 0; i < $ChoiceFieldGroupElements.length; i++) {
        new fabric["ChoiceFieldGroup"]($ChoiceFieldGroupElements[i]);
    }
  var MessageBanner =   new fabric["MessageBanner"]($mb);
});

Это файл test.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Fabric Test</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
    <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

        <script src="test.js"></script>
</head>

<body>

    <br />
    <div id="title" class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Title</div>
    <br /><br />
    <p id="body" class="ms-font-m-plus ms-fontColor-neutralTertiary">Body text:</p>

    <div id="choicefieldgroup" class="ms-ChoiceFieldGroup" role="radiogroup">
        <ul class="ms-ChoiceFieldGroup-list">
            <li class="ms-RadioButton">
                <input tabindex="-1" type="radio" class="ms-RadioButton-input">
                <label role="radio"
                       class="ms-RadioButton-field"
                       tabindex="0"
                       aria-checked="false"
                       name="choicefieldgroup">
                    <span id="spn1" class="ms-Label">Option 1</span>
                </label>
            </li>
            <li class="ms-RadioButton">
                <input tabindex="-1" type="radio" class="ms-RadioButton-input">
                <label role="radio"
                       class="ms-RadioButton-field"
                       tabindex="0"
                       aria-checked="false"
                       name="choicefieldgroup">
                    <span class="ms-Label">Option 2</span>
                </label>
            </li>
        </ul>
    </div>

    <div class="ms-MessageBanner" id="notification-popup">
        <div class="ms-MessageBanner-content">
                <div class="ms-MessageBanner-text">
                        <div class="ms-MessageBanner-clipper">
                                <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header">Notification Title</div>
                                <div class="ms-font-m ms-fontWeight-semilight" id="notification-body">Notification Body</div>
                        </div>
                </div>
                <button class="ms-MessageBanner-expand" style="display:none"><i class="ms-Icon ms-Icon--chevronsDown"></i> </button>
                <div class="ms-MessageBanner-action"></div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button>
</div>

</body>
</html>
Источник

1 ответ

Решение

Оказывается, я смешиваю элементы jQuery с элементами Fabric.

Ошибка происходит при инициализации объекта Fabric, а не в селекторе.

Если ваш элемент HTML, вы создаете его компонент, используя синтаксис:

new fabric['ComponentName'](document.querySelector('.class-name'));

Однако, если у вас есть объект jQuery, вы должны передать необработанный HTML-код методу Fabric с помощью [0]:

new fabric['ComponentName']($('.class-name')[0]);
Источник
Другие вопросы по тегам