Question

本周我一直在与KnockoutJS合作并且有一个特定的问题，我希望其他人遇到并在我面前解决...

基本上我绑定了一个选择框，但需要能够控制实际的选项标签本身（例如禁用），这意味着我无法使用＆＃34;选项＆＃34;绑定当然不能让你对选项标签进行细致的控制......这就是我想出来的（它有效！）

<select data-bind="foreach: $root.availableLabels, value: Label, enable: !IsConfirmed(), optionsCaption: 'Please select...'">
    <option data-bind="text: Value, value: $data, css: { 'paired-label': IsPaired }, disable: IsPaired"></option>
</select>

我的问题在于＆＃34; optionsCaption＆＃34;，因为我使用foreach方法生成内部选项，这不会像我能够使用更简单的＆＃34;选项＆那样自动工作＃34;在淘汰页面上找到的绑定...所以如果我正在迭代的对象有一个空的＆＃34;标签＆＃34;值只是显示列表中的第一个而不是＆＃34;请选择...＆＃34;这就是我理想的情况。

有没有人知道解决这个问题的方法？我没有发布我的视图模型代码，因为我不确定它实际上是否相关，但如果需要，当然只是问一下！

简而言之，问题是我需要使用foreach以便我可以在选项上设置css / attr绑定，但是仍然需要＆＃34;未选择＆＃34;选项。

非常感谢您的任何帮助！

Answer 1

您可以使用无容器foreach循环在固定的之后生成选项＆＃34;请选择...＆＃34; 选项：

<select data-bind="value: Label, enable: !IsConfirmed()">
    <option value="">Please select...</option>
    <!-- ko foreach: $root.availableLabels -->
    <option data-bind="text: Value, 
                       value: $data, 
                       css: { 'paired-label': IsPaired },
                       disable: IsPaired"></option>
    <!-- /ko -->
</select>

演示：JSFiddle

Answer 2

标准选项绑定提供了一种后处理绑定的方法。为此，您需要使用optionsAfterRender。

您可以找到一个完整的示例，专门用于禁用knockout.js options documentation page at the very bottom上<select>内的选项。

从该页面引用：

如果需要在生成的选项元素上运行一些其他自定义逻辑，则可以使用optionsAfterRender回调。每次将选项元素插入列表时，都会调用回调函数，并使用以下参数：


插入的选项元素

与其绑定的数据项，或标题元素未定义的数据项

<select size=3 data-bind="
    options: myItems,
    optionsText: 'name',
    optionsValue: 'id',
    optionsAfterRender: setOptionDisable">
</select>

<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1, disable: ko.observable(false)},
            { name: 'Item 3', id: 3, disable: ko.observable(true)},
            { name: 'Item 4', id: 4, disable: ko.observable(false)}
        ],
        setOptionDisable: function(option, item) {
            ko.applyBindingsToNode(option, {disable: item.disable}, item);
        }
    };
    ko.applyBindings(vm);
</script>

最终，这意味着您必须修改绑定集合以包含可观察属性，然后可以在后处理函数中引用它们。如果我正确理解文档，更新observables 也应该重新运行后处理器。

编辑：您也可以使用此

self.setOptionDisable= function(option, item) {
    option.disabled = item.disable()
}

Foreach而不是选项绑定...我怎样才能复制＆＃34; optionsCaption＆＃34;功能？

2 个答案: