使用MVC 5進行敲除綁定選擇更改

Question

我在MVC應用程序的模型上使用Knockout的“ foreach”函數來加載下拉選項表。 當選定的下拉值更改時，我需要在模型中跟蹤該更改。

我嘗試在模型中的元素上使用訂閱選項，但是當它更改時，綁定到它的函數不會觸發。 我知道有幾種方法可以實現此更改，但是我更喜歡堅持使用這種格式定義函數，如視圖底部所示。

模型：

    public class ProfileLookAndFeelViewModel : StandardLayoutViewModel
        {
            public ProfileLookAndFeelViewModel()
            {
                Form = new FormGroup();
                PriceUOMDropdownOptions = new PriceUOM();
                UOMInformation = new UOMInformationGroup();
            }

            public FormGroup Form { get; set; }
            public PriceUOM PriceUOMDropdownOptions { get; set; }
            public UOMInformationGroup UOMInformation { get; set; }

            public class FormGroup
            {            
                public bool FormValueChanged { get; set; }            
            }

            public class PriceUOM
            {
                public int Id { get; set; }
                public String Name { get; set; }
                public string Code { get; set; }
            }

            public class PriceUOMOverride
            {
                public string ItemDescription { get; set; }
                public string TemplateCode { get; set; }
                public string UOMDesc { get; set; }
                public List<PriceUOM> PriceUOMDropdownOptions { get; set; }
                public int SelectedPriceUOM { get; set; }
                public int SelectedPriceUOMOriginal { get; set; }
                public bool SelectedPriceUOMChanged { get; set; }
            }  

            public class UOMInformationGroup
            {
                public UOMInformationGroup()
                {
                    UOMs = new List<PriceUOMOverride>();
                }

                public List<PriceUOMOverride> UOMs { get; set; }
                public bool UOMsChanged { get; set; }
            }
        }

視圖：

    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>Description</th>
                <th>Template Code</th>
                <th>Default UOM</th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: $root.UOMInformation.UOMs -->
            <tr>
                <td data-bind="text: ItemDescription"></td>
                <td data-bind="text: TemplateCode"></td>
                <td class="center" >
                    <select data-bind="options: PriceUOMDropdownOptions, optionsText: 'Code', optionsValue: 'Id', value: SelectedPriceUOM, css: { important: SelectedPriceUOMChanged() == true }"></select>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>  

    <script type="text/javascript">
    $(function () {
        var vmProfileLookAndFeel = function () { var self = this; };
        vmProfileLookAndFeel = ko.mapping.childrenIndependently($.parseJSON('@Html.RawJsonForKoMapping(Model)'), ["UOMInformation", "Form", "PriceUOMDropdownOptions"]);
        vmProfileLookAndFeel.UOMInformation.UOMs.subscribe(function (newValue) {
            vmProfileLookAndFeel.ValueChanged();
        });

        vmProfileLookAndFeel.ValueChanged = function () {
            //Do something;
        };

        ko.applyBindings(vmProfileLookAndFeel);
        });
    </script>

我嘗試了這個建議，但答案不是從MVC模型加載數據，而是從硬編碼數組加載數據

訂閱以從foreach循環中選擇項目

編輯：

我更新了視圖以反映添加數組是可觀察的。

這是我調用的用於映射對象的函數

    ko.mapping.childrenIndependently = function (jsObject, childrenArray) {
        var mapping = {
            "ignore": childrenArray
        }
        var vm = ko.mapping.fromJS(jsObject, mapping);

        // handle children
        for (var childrenArrayIndex = 0; childrenArrayIndex < childrenArray.length; childrenArrayIndex++) {
            if (jsObject.hasOwnProperty(childrenArray[childrenArrayIndex])) {
                // if the property is an array, create an objservable array
                // and map each child
                // else map the property
                if ($.isArray(jsObject[childrenArray[childrenArrayIndex]])) {
                    vm[childrenArray[childrenArrayIndex]] = ko.observableArray();

                    for (var childObjectArrayIndex = 0; childObjectArrayIndex < jsObject[childrenArray[childrenArrayIndex]].length; childObjectArrayIndex++) {
                        vm[childrenArray[childrenArrayIndex]].push(ko.mapping.childrenIndependently(jsObject[childrenArray[childrenArrayIndex]][childObjectArrayIndex], childrenArray.slice(childrenArrayIndex)));
                    }
                }
                else {
                    vm[childrenArray[childrenArrayIndex]] = ko.mapping.childrenIndependently(jsObject[childrenArray[childrenArrayIndex]], childrenArray.slice(childrenArrayIndex));
                }
            }
        }

        return vm;
    };

Answer 1

對於這種情況，我最終在<select>元素之后立即添加了隱藏的計算函數，每次添加一行時都會調用該函數。 從那里，我可以操縱對象的生成。

    <td class="center" >
        <select data-bind="options: PriceUOMDropdownOptions, optionsText: 'Code', optionsValue: 'Id', value: SelectedPriceUOM, css: { important: SelectedPriceUOMChanged() == true }"></select>
        <span class="hide" data-bind="text: $root.OnTheFlyCalculations($data)()"></span>
    </td>

新功能

    vmProfileLookAndFeel.OnTheFlyCalculations = function (item) {
        return ko.computed({
            read: function () {                 
                return item.SomethingChanged(true);
            }
        }, vmProfileLookAndFeel)
    };