使用 office-ui-fabric-js 创建 ChoiceFieldGroup 时 KnockoutJS 绑定失败

Question

我正在为 Outlook 创建一个加载项（使用 office-ui-fabric-js 和 knockoutjs），它使用 ChoiceFieldGroup 组件。

当我像 https://dev.office.com/fabric-js/Components/ChoiceFieldGroup/ChoiceFieldGroup.html 中的示例一样创建 ChoiceFieldGroup 时然后 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 方法不起作用？

Answer 1

这是因为 Fabric 正在查看 aria-checked 属性而不是 checked。

如果您查看 underlying code，您会发现以下片段：

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>

使用 office-ui-fabric-js 创建 ChoiceFieldGroup 时 KnockoutJS 绑定失败

KnockoutJS binding fail when creating a ChoiceFieldGroup using office-ui-fabric-js

knockout.js

office-js

office-ui-fabric