1

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

但是，如果我在没有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方式不起作用？

4

1 回答 1

1

这是因为 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>
于 2018-04-12T14:10:31.997 回答