为 Knockoutjs 和映射器扩展添加记录功能答案

【问题标题】：Add Record Functionality for Knockoutjs and mapper extension为 Knockoutjs 和映射器扩展添加记录功能
【发布时间】：2014-06-26 08:03:10
【问题描述】：

在下面的代码中，我试图为添加/插入添加一个选项/预备行。我期待这能起作用，但我不知道为什么单击“添加选项”按钮时我的视图没有更新。

  $.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>

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc knockout.js

【解决方案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;
                    }
                }

【讨论】：