Сбой привязки KnockoutJS при создании ChoiceFieldGroup с использованием office-ui-fabric-js

Я создаю надстройки для Outlook (используя office-ui-fabric-js и KnockoutJS), в которых используется компонент ChoiceFieldGroup.

Когда я создаю ChoiceFieldGroup, как показано в примере на https://dev.office.com/fabric-js/Components/ChoiceFieldGroup/ChoiceFieldGroup.html, то привязка KnockoutJS не работает.

Вот код

<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
    <div class="ms-ChoiceFieldGroup-title">
        <label class="ms-Label">Include email attachments:</label>
    </div>
    <ul class="ms-ChoiceFieldGroup-list">
        <li class="ms-RadioButton">
            <input id="option1" name="emailAttachment" type="radio" class="ms-RadioButton-input" value="withEmail" data-bind="checked: includeEmailAttachmentSelectedOption">
            <label for="option1" role="radio" class="ms-RadioButton-field"  name="choicefieldgroup">
                <span class="ms-Label">With the email</span>
            </label>
        </li>
        <li class="ms-RadioButton">
            <input id="option2" name="emailAttachment" type="radio" class="ms-RadioButton-input" value="individualReferenceFiles" data-bind="checked: includeEmailAttachmentSelectedOption">
            <label for="option2" role="radio" class="ms-RadioButton-field"  name="choicefieldgroup">
                <span class="ms-Label">As individual reference files</span>
            </label>
        </li>
    </ul>
</div>

<script>
  $(document).ready(() => {    
     const ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
     for (let i = 0; i < ChoiceFieldGroupElements.length; i++) {
       new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
     }
  }
</script>

Однако если я создам ChoiceFieldGroup без fabricjs, используя только стандартный HTML, тогда это сработает.

Вот код

<div>
    <input type="radio" id="contactChoice1"
             name="contact" value="email" data-bind="checked: includeEmailAttachmentSelectedOption">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
             name="contact" value="phone" data-bind="checked: includeEmailAttachmentSelectedOption">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
             name="contact" value="mail" data-bind="checked: includeEmailAttachmentSelectedOption">
    <label for="contactChoice3">Mail</label>
</div>

Кто-нибудь может сказать мне, почему использование fabricjs не работает?


office-ui-fabric office-js knockout.js
person vcRobe    schedule 12.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это потому, что Fabric просматривает свойство aria-checked, а не checked.

Если вы посмотрите на основной код, вы найдете этот фрагмент:

if (this._choiceField.getAttribute("aria-checked") === "true") {
  this._choiceField.classList.add("is-checked");
}

Попробуйте изменить атрибут data-bind на "aria-checked: includeEmailAttachmentSelectedOption":

<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
    <div class="ms-ChoiceFieldGroup-title">
        <label class="ms-Label">Include email attachments:</label>
    </div>
    <ul class="ms-ChoiceFieldGroup-list">
        <li class="ms-RadioButton">
            <input id="option1" name="emailAttachment" type="radio" class="ms-RadioButton-input" 
                   value="withEmail" data-bind="aria-checked: includeEmailAttachmentSelectedOption">
            <label for="option1" role="radio" class="ms-RadioButton-field" name="choicefieldgroup">
                <span class="ms-Label">With the email</span>
            </label>
        </li>
        <li class="ms-RadioButton">
            <input id="option2" name="emailAttachment" type="radio" class="ms-RadioButton-input" 
                   value="individualReferenceFiles" data-bind="aria-checked: includeEmailAttachmentSelectedOption">
            <label for="option2" role="radio" class="ms-RadioButton-field" name="choicefieldgroup">
                <span class="ms-Label">As individual reference files</span>
            </label>
        </li>
    </ul>
</div>
<script>
    $(document).ready(() => {
                const ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
                for (let i = 0; i < ChoiceFieldGroupElements.length; i++) {
                    new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
                }
            }
</script>
person Marc LaFleur    schedule 12.04.2018