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 。尝试创建一个变量并返回该变量。

这样的事情：

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

现在它正常运作。计算的Observables是解决方案。

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

2 个答案: