在嵌套对象敲除js上设置选中

Question

我有一个复杂的对象，我正在尝试设置

SelectedTransportation

属性这是我在映射中手动添加的。该代码正确填充了下拉列表，但我不知道如何正确设置 SelectedTransportation。我尝试在映射过程中和通过循环映射后设置它，但所有尝试都失败了。看起来这应该是相当容易的，但解决方案让我望而却步。

var model = {"LoadCarriers":[
      {
         "Id":1,
         "IsDispatched":false,
         "IsPrimary":false,
         "RCNotes":null,
         "CarrierId":4,
         "Carrier":{
            "Id":4,
            "Name":"West Chase",
            "MCNumber":"EPZEPFEEGJAJ",
            "DOTNumber":"AJSCEXFTFJ",
            "InternetTruckStopCACCI":"DJOGRBQ",
            "Phone":"0773283820",
            "RemitToPhone":null,
            "AlternatePhone":"4428290470",
            "Fax":null,
            "MainAddress":{
               "ShortAddress":"Toledo, IN",
               "Address1":"Lee St",
               "Address2":"apt 131",
               "City":"Toledo",
               "State":"IN",
               "PostalCode":"07950",
               "Country":"US"
            },
            "RemitToAddress":{
               "ShortAddress":"Fuquay Varina, MO",
               "Address1":"Manchester Rd",
               "Address2":"",
               "City":"Fuquay Varina",
               "State":"MO",
               "PostalCode":"23343",
               "Country":"US"
            },
            "EmailAddress":"jason.price14@gmail.com",
            "Coverage":null,
            "CanLoad":false,
            "InsuranceNumber":"RIQERAIAJBMP",
            "InsuranceExpirationDate":"\/Date(1442978115587)\/",
            "AdditionalInsurance":null,
            "ProNumber":"07643",
            "URL":"http://www.west-chase.com",
            "AccountId":1
         },
         "Dispatcher":"Bob McGill",
         "DriverId":null,
         "LoadDriver":{
            "Id":1,
            "Name":"Bobby Pittman",
            "Phone":"8950121068",
            "Mobile":null,
            "MT":false,
            "Tractor":"OQRNBP",
            "Trailer":"QTZP",
            "Location":"Lee St",
            "TansportationSize":"958424896573544192",
            "Pallets":null,
            "IsDispatched":false,
            "TransportationId":7,
            "Transportation":{
               "Name":"Flatbed or Van",
               "Id":7
            },
            "TransportationList":[
               {
                  "Name":"Flat",
                  "Id":1
               },
               {
                  "Name":"Van or Reefer",
                  "Id":2
               },
               {
                  "Name":"Rail",
                  "Id":3
               },
               {
                  "Name":"Auto",
                  "Id":4
               },
               {
                  "Name":"Double Drop",
                  "Id":5
               },
               {
                  "Name":"Flat with Tarps,",
                  "Id":6
               },
               {
                  "Name":"Flatbed or Van",
                  "Id":7
               },
               {
                  "Name":"Flatbed, Van or Reefer",
                  "Id":8
               },
               {
                  "Name":"Flatbed with Sides",
                  "Id":9
               },
               {
                  "Name":"Hopper Bottom",
                  "Id":10
               },
               {
                  "Name":"Hot Shot",
                  "Id":11
               },
               {
                  "Name":"Lowboy",
                  "Id":12
               },
               {
                  "Name":"Maxi",
                  "Id":13
               },
               {
                  "Name":"Power Only",
                  "Id":14
               },
               {
                  "Name":"Reefer w/ Pallet Exchange",
                  "Id":15
               },
               {
                  "Name":"Removable Gooseneck",
                  "Id":16
               },
               {
                  "Name":"Step Deck",
                  "Id":17
               },
               {
                  "Name":"Tanker",
                  "Id":18
               },
               {
                  "Name":"Curtain Van",
                  "Id":19
               },
               {
                  "Name":"Flatbed Hazardous",
                  "Id":20
               },
               {
                  "Name":"Reefer Hazardous",
                  "Id":21
               },
               {
                  "Name":"Van Hazardous",
                  "Id":22
               },
               {
                  "Name":"Vented Van",
                  "Id":23
               },
               {
                  "Name":"Van w/ Pallet Exchange",
                  "Id":24
               },
               {
                  "Name":"B-Train",
                  "Id":25
               },
               {
                  "Name":"Container",
                  "Id":26
               },
               {
                  "Name":"Double Flat",
                  "Id":27
               },
               {
                  "Name":"Flatbed or Stepdeck",
                  "Id":28
               },
               {
                  "Name":"Air",
                  "Id":29
               },
               {
                  "Name":"Ocean",
                  "Id":30
               },
               {
                  "Name":"Walking Floor",
                  "Id":31
               },
               {
                  "Name":"Landoll Flatbed",
                  "Id":32
               },
               {
                  "Name":"Conestoga",
                  "Id":33
               },
               {
                  "Name":"Load Out",
                  "Id":34
               },
               {
                  "Name":"Van Air-Ride",
                  "Id":35
               },
               {
                  "Name":"Container Hazardous",
                  "Id":36
               }
            ],
            "CarrierId":0,
            "Carrier":null
         },
         "Carriers":null,
         "LoadId":1
      }
   ]};



var loadDriverModel = function (data) {
    ko.mapping.fromJS(data, {}, this);
    this.SelectedTransportation = ko.observable();
};
var loadDriverMapping = {
    'LoadDriver': {
        key: function (data) {
            return data.Id;
        },
        create: function (options) {
            return new loadDriverModel(options.data);
        }
    }
};

var carrierModel = function (data) {
    ko.mapping.fromJS(data, loadDriverMapping, this);
};

var carrierMapping = {
    'LoadCarriers': {
        key: function (data) {
            return data.Id;
        },
        create: function (options) {
            return new carrierModel(options.data);
        }
    }
};

var model = ko.mapping.fromJS(model);
ko.applyBindings(model);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>


<!-- ko foreach: LoadCarriers -->

<select class="form-control" data-bind="options:LoadDriver.TransportationList, optionsText:'Name', value:$data.LoadDriver.SelectedTransportation"></select>
<!-- /ko -->

Answer 1

@JasonlPrice 我现在无法测试，但我建议您不要在 loadDriverModel 函数中使用 this。尝试创建一个变量，然后 return 该变量。

像这样：

var loadDriverModel = function (data) {
    var viewModel = ko.mapping.fromJS(data);
    viewModel.SelectedTransportation = ko.observable();
    return viewModel;
};

Answer 2

我最终替换了这个

var loadDriverModel = function (data) {
ko.mapping.fromJS(data, {}, this);
this.SelectedTransportation = ko.observable();}

与以下。

var loadDriverModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
this.SelectedTransportation = ko.computed(function () {
            return ko.utils.arrayFirst(self.TransportationList(), function (item) { return item.Id() === self.TransportationId() });
        }, self);
    };

现在可以正常使用了。 Computed Observables 是解决方案。

在嵌套对象敲除js上设置选中

Set selected on nested object knockout js

javascript

knockout-mapping-plugin

knockout-3.0