javascript - 为 Knockoutjs 和映射器扩展添加记录功能

Question

在下面的代码中，我尝试添加一个选项/Prelim 行以进行添加/插入。我本以为它会起作用，但我不知道为什么单击“添加选项”按钮时我的 View 没有更新。

  $.postJSON('/Admin/GetPrelimsByJob', { jobId: 109 }, function(data) {
            var length = data.length;
            var insertRecord = {};

            if (length > 0) {
                insertRecord = data[data.length - 1]; //last record is an empty PremlimViewModel for insert

                data.splice(data.length - 1, 1); //remove that blank insert record
            }
            var mapping = {
                create: function(options) {
                    //customize at the root level.  
                    var innerModel = ko.mapping.fromJS(options.data);

                    innerModel.addOption = function() {
                         innerModel.push(ko.mapping.fromJS(insertRecord));
                    };

                    return innerModel;
                }
            }

            viewModel = ko.mapping.fromJS({ prelims: data }, mapping);
            ko.applyBindings(viewModel);

        });

以及以下 HTML:

   <div class="options-body" data-bind="foreach: prelims">
        <div class="options-row-container">
            <div data-bind="attr: { 'data-id': PrelimId }" class="options-row">
                <div class="options-col">
                    <div class="ui-widget">
                        <select class="custom-combox-select" data-bind="foreach: Options, combobox: Option">
                            <!-- ko if: $index() === 0 -->
                            <option value=""></option>
                            <!-- /ko -->
                            <option data-bind="text: OptionLetterText, attr: { value: OptionLetterValue }, attrIf: { selected: 'selected', _if: OptionLetterSelected }"></option>
                        </select>
                    </div>
                </div>

                <div class="options-col text-center">
                    <input type="text" data-bind="value: Qty" />
                </div>
            </div>
        </div>
    </div>
    <button type="button" data-bind="click: prelims.addOption">
        Add Option
    </button>

Answer 1

好吧，我有两件事是不正确的:

1)我需要声明一个模板:

   <div class="options-body" data-bind="template: { name: 'PrelimsTemplate', foreach: prelims }">

2)我将属性名称“prelims”附加到我的 viewModel 中，因此我的映射中发生了一行更改:

  var mapping = {
                    create: function (options) {
                        //customize at the root level.  
                        var innerModel = ko.mapping.fromJS(options.data);

                        innerModel.addOption = function () {
                            innerModel.prelims.push(ko.mapping.fromJS(insertRecord));
                        };

                        return innerModel;
                    }
                }