0

私が間違っていることを確認してください。

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);
            }
        }
    };

ProgrammeHead 追加

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

1 に答える 1

1

パラメータは、valueAccessorバインドされた値を返す関数です。バインドされた値がオブザーバブルである場合、オブザーバブルを「アンラップ」して実際の値を取得する必要があります。あなたのコードでは、値を適切にアンラップしていません。そのはず：

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

関数の内容はupdatea の本体として機能するため、計算された依存関係の追跡ko.computedと同じように機能します。

したがって、Knockout は、エバリュエーターの初回実行時に依存関係を検出するだけでなく、毎回再検出します。これは、たとえば、依存関係が動的に変化する可能性があることを意味します。依存関係 A は、計算されたオブザーバブルが B または C にも依存するかどうかを判断できます。その後、A または B または C の現在の選択のいずれかが変更された場合にのみ再評価されます。依存関係を宣言する必要はありません。依存関係は、実行時にコードの実行によって決定されます。

于 2015-11-12T22:04:39.067 に答える