如何使用可观察数组和 forEach 绑定解决值不绑定问题

Question

我正在使用带有实体框架的淘汰赛 js 和 asp.net mvc (vs2013) 首先，我有一个索引页面（masterViewModel），我在其中声明了所有子视图模型

此外，还有一个视图模型和一个函数，用于对服务器端进行 ajax 调用、从服务器端收集信息、插入到可观察数组中并将该数组的元素绑定到视图。 来自服务器端的数据显示，三个对象，绑定有效，但不是将三个不同的辅助驱动程序名称绑定到视图，而是在循环后绑定相同的值三次（对象 2） 通过对象 0 和 1 。目前我目前的输出是

史密斯 史密斯 史密斯

这是我在淘汰赛中对服务器端的调用

function populateDrivers() {
    if (!masterViewModel.isAuthenticated()) return;

    $.when(getSecureData("/api/Drivers/?driverId="))
    .done(function (resp) {
        masterViewModel.vehicleDetail.assistantDriverList(resp.assistantDriverList)

       ko.utils.arrayMap(resp.assistantDriverList, function (obj) {
       //ko.utils.arrayForEach(resp.assitantDriverList, function (obj)
       //arrayMap
       masterViewModel.FleetInfoVM.vehicleDetail.assistantDriverName(obj.assistantDriverName);
       masterViewModel.FleetInfoVM.vehicleDetail.carRegNumber(obj.CarRegNumber);
       masterViewModel.FleetInfoVM.vehicleDetail.make(obj.Make);
       masterViewModel.FleetInfoVM.vehicleDetail.Model(obj.Model);      
        });

    });

}

这是我在 html 中的绑定

<table style="table-layout: fixed" class="table table-striped table-bordered">
<thead>
<tr>
    <th>Assistant Name</th>

</tr>
</thead>

<tr>

    <td data-bind="text: $root.FleetInfoVM.vehicleDetail.assistantDriverName"> </td>

    <td class="td-actions">
        <a class="btn btn-small" data-bind="click: $root.vehicleDetail.edit" title="Edit">
            <i class="icon-edit"></i>
        </a>
        <a class="btn btn-small" ">

        </a>
        <a class="btn btn-small">

        </a>
    </td>
</tr>
</tbody>
</table>

这些是我的视图模型

function MasterViewModel() {
        var pvm = this;
        mvm.loginVM = new LoginViewModel();
        mvm.VehicleVM = new vehicleViewModel();
        mvm.topManagerVM = new TopManagerViewModel();
        mvm.FleetInfoVM = new FleetInfoViewModel
    }

   MasterViewModel = new MasterViewModel();
   ko.applyBindings(MasterViewModel, document.getElementById("htmlTop"));


FleetInfoViewModel
=========================================================================

function FleetInfoViewModel
{
  var fiv = this; 

   fiv.branch id = ko.observable(0);
   fiv.branch name = ko.observable(0);
   fiv.location = ko.observable("");
   fiv.driverDetail = new DriverViewModel();
   fiv.vehicleDetail = new vehicleViewModel(); 

}
function DriverViewModel() {
    var drv = this;
    drv.driverId = ko.observable(0);
    drv.driverName = ko.observable("");
}
function  vehicleViewModel{
    vvm.assitantDriverList =  ko.observable([]);
    vvm.assistantDriverName = ko.observable("");
    vvm.regNumber = ko.observable(0);
    vvm.make = ko.observable(""); 
    vvm.model = ko.observable("");
   }

Answer 1

看起来问题出在您的arrayMap 上。虽然您正在迭代其中的结果，但您仍然只是绑定回同一个对象（因此为什么您要在每次迭代中覆盖结果）。您应该在其中创建vehicleViewModel 的实例，并将其推送到 observableArray。类似的东西

var vehicleList = ko.observableArray();

// arrayMap returns an array of whatever you return therein. In this case
// an instance of your vehicleDetail viewModel.
vehicleList = ko.utils.arrayMap(resp.assistantDriverList, function (obj) {
    var vehicleDetail = new vehicleViewModel();
    vehicleDetail.assistantDriverName(obj.assistantDriverName);
    vehicleDetail.carRegNumber(obj.CarRegNumber);
    vehicleDetail.make(obj.Make);
    vehicleDetail.Model(obj.Model);      
    return vehicleDetail;
});