0

我正在使用无容器流控制语法来确定当用户进入编辑模式时是否应该在选择列表中显示项目。我似乎在使用 IE8 时遇到了麻烦。从我一直在阅读的内容中，IE8 删除了选择中的评论。伟大的。

我看到的选项

  1. 再次调用服务层以获得我需要的列表。
  2. 我尝试弄乱 doctype，但它位于使用框架集的旧旧应用程序中，我无法更改它，否则它会破坏网站的其他部分。文档类型集是：http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
  3. 以某种方式将 html 注入到选择列表中，可能来自淘汰赛或 jquery

有没有办法让它跨浏览器工作，而不必为最终列表进行额外的服务调用？

这是我的选择列表代码

<tr>
                <td><label for="EditStatus">Status</label></td>
                <td><select id="EditStatus" class="" name="EditStatus" data-bind="value: editStatus" >
                        <option value="" selected>Select...</option>
                        <!-- ko if: editStatusCanShowActive()  -->
                        <option value="A">Active</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowInactive() -->
                        <option value="I">Inactive</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowHold() -->
                        <option value="H">Hold</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowLocked() -->
                        <option value="L">Locked</option>
                        <!-- /ko -->
                    </select></td>
            </tr>
4

2 回答 2

3

还有另一个更好的选择。使用计算的 observable 来构建您的选项数组，如下所示：

this.status = ko.computed(function() {
    var options = [];
    if (this.editStatusCanShowActive()) {
        options.push('Active');
    }
    if (this.editStatusCanShowInactive()) {
        options.push('Inactive');
    }
    if (this.editStatusCanShowHold()) {
        options.push('Hold');
    }
    if (this.editStatusCanShowLocked()) {
        options.push('Locked');
    }
    return options;
}, this);

这是这个工作的一个例子：http: //jsfiddle.net/badsyntax/8FvMR/

于 2013-09-20T14:55:57.243 回答
0

一种选择是在您的视图模型中构建一个列表，例如：

this.availableStatuses = ko.computed(function() {
   var statuses = [];

    if (this.editStatusCanShowActive()) {
        statuses.push({ name: "Active", value: "A" });   
    }

    if (this.editStatusCanShowInactive()) {
        statuses.push({ name: "Inactive", value: "I" });   
    }

    if (this.editStatusCanShowHold)) {
        statuses.push({ name: "Hold", value: "H" });   
    }

    if (this.editStatusCanShowLocked()) {
        statuses.push({ name: "Locked", value: "I" });   
    }

    return statuses;

}, this);

然后，在您的 UI 中绑定，例如：

<select data-bind="options: availableStatuses, optionsText: 'name', optionsValue: 'value', value: editStatus"></select>
于 2013-09-20T14:58:38.013 回答