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

时间:2015-10-05 07:46:15

标签: javascript asp.net-mvc knockout.js single-page-application

Iam使用knockout js和asp.net mvc(vs2013)与实体框架 首先,我有一个索引页面(masterViewModel),我在其中声明了所有子视图模型

此外,还有一个viewmodel和一个functon,它对服务器端进行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("");
   }

1 个答案:

答案 0 :(得分:0)

问题出现在您的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;
});