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

【问题标题】：KnockoutJS binding fail when creating a ChoiceFieldGroup using office-ui-fabric-js使用 office-ui-fabric-js 创建 ChoiceFieldGroup 时，KnockoutJS 绑定失败
【发布时间】：2018-04-12 13:59:05
【问题描述】：

我正在为 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>

但是，如果我在没有 fabricjs 的情况下创建 ChoiceFieldGroup，则仅使用标准 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 方式不起作用？

【问题讨论】：

标签： knockout.js office-js office-ui-fabric

【解决方案1】：

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

如果你查看underlying code，你会发现这个sn-p：

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>

【讨论】：