淘汰赛自定义绑定未更新

Question

请检查我做错了什么。

当我在 javascript 中创建控件时，我的自定义绑定处理程序的更新部分不会执行。我有一个在表中创建一行的 Add 函数。绑定到自定义绑定的控件会执行更新部分，但不会执行随后添加的控件。

HTML

<div id="collapse-programHead" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="cv">
                     <thead>
                        <tr>
                            <th>Programme</th>
                            <th>Core Module Count</th>
                            <th>Core SAQA Credit</th>
                            <th>Elective Module Count</th>
                            <th>Elective SAQA Credit</th>
                            <th>Credit</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: ProgrammeHead">
                        <!-- ko if: isActive -->
                        <tr>
                            <td><select data-bind="options: programmes, optionsText: 'Programme', value: ProgrammeID, optionsValue:'ProgrammeID', optionsCaption:''"></select></td>
                            <td><input type="text" readonly="true" data-bind="value:ModuleCount, offeringCount:$root.programmeOfferingCount"/></td>

                            <td><input type="text"/></td>
                            <td><input type="text"/></td>
                            <td><input type="text"/></td>
                            <td><input type="text" data-bind="value: Credit"/></td>
                            <td class="tinyTD"><a class="removeRow" id="ProgrammeHead" title="Delete item" href="javascript:void(0)"></a></td>
                            <td class="hideTD"><input type="hidden" data-bind="value: CVId" /></td>
                            <td class="hideTD"><input type="hidden" data-bind="value: ProgrammeID" /></td>
                            <td class="hideTD"><input type="hidden" data-bind="value: ProgrammeOfferingID" /></td>
                            <td class="hideTD"><input type="hidden" data-bind="value: ManagementLoadID" /></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
                <a title="Add row" id="a2" href="javascript:void(0)" data-bind="click: addRow.bind($data, 'programHead')"><label>Add row</label></a>
            </div>
        </div>

ko.bandingHandler

ko.bindingHandlers.offeringCount = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            return { controlsDescendantBindings: true };
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var value = ko.unwrap(valueAccessor)
            var id = ko.unwrap(bindingContext.$data.ProgrammeID);

            var item = programmes().filter(function (i) {
                return i.ProgrammeID() == id;
            })
            if (item.length > 0) {
                var count = ko.unwrap(item[0].ProgrammeOfferingCount);
                bindingContext.$data.ModuleCount(count);
            }
        }
    };

程序头添加

self.ProgrammeHead.push({ 'ManagementLoadID': '', 'CVId': '', 'ModuleCount': count, 'ProgrammeID': '', 'ProgrammeOfferingID': '', 'Credit': '', 'isActive': active });

Answer 1

valueAccessor 参数是一个返回绑定值的函数。如果绑定的值是可观察的，那么您还必须“解包”可观察的以获得实际值。在您的代码中，您没有正确解开值。应该是：

var value = ko.unwrap(valueAccessor());

update 函数的内容充当ko.computed 的主体，因此与computed dependency tracking 一样工作：

因此，Knockout 不仅会在评估程序第一次运行时检测依赖关系 - 它每次都会重新检测它们。这意味着，例如，依赖关系可以动态变化：依赖关系 A 可以确定计算出的 observable 是否还依赖于 B 或 C。然后，只有当 A 或您当前选择的 B 或 C 发生变化时，才会重新评估它。您不必声明依赖项：它们是在运行时根据代码的执行确定的。