KnockoutJS 和 Jquery 如何动态填充组合

Question

我有一个使用 2 个连击的表格。第一个组合在加载表单时填充，第二个组合根据第一个组合选择从服务器 (ajax) 填充。

这是用于填充我的 supervisors 组合的 ajax 代码：

// here go and get employee supervisors
var cboSupervisor = $('#cboAuthorizer');
cboSupervisor.html('');

$.ajax({
    url: '@Url.Content("~/Employee/GetEmployeeSupervisors")/',
    type: 'POST',
    contentType: 'application/json',
    dataType: "json",
    data: JSON.stringify({
        employeeId: ui.item.employeeId
    }),
    success: function(data) {

        if (data.success) {
            $.each(data.data, function() {
                cboSupervisor.append($("<option />").val(this.SupervisorId).text(this.SupervisorName));
            });
        }
    }
});

我有我的 knockoutjs 模型，但没有为这个组合工作 data-bind，我猜是因为组合的动态加载。

<select id="cboAuthorizer" class="form-control" data-bind="value: exitPass.authorizer">
</select>

我的淘汰模型是这样的：

var jsonPass = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model.ExitPass, Newtonsoft.Json.Formatting.Indented, jsonSettings));

var ExitPass = function(exitPass) {
    var self = this;

    self.incidentId = ko.observable(exitPass.IncidentId || 0);
    self.employeeId = ko.observable(exitPass.EmployeeId || 0);
    self.employerId = ko.observable(exitPass.EmployerId || 0);
    self.employerDesc = ko.observable(exitPass.EmployerDesc);
    self.employeeNumber = ko.observable(exitPass.EmployeeNumber);
    self.employeeName = ko.observable(exitPass.EmployeeName);
    self.createdByName = ko.observable(exitPass.CreatedByName);
    self.incidentDate = ko.observable(exitPass.IncidentDate);
    self.incidentCode = ko.observable(exitPass.IncidentCode);
    self.incidentCodeDesc = ko.observable(exitPass.IncidentCodeDesc);
    self.incidentTypeId = ko.observable(exitPass.IncidentTypeId || 0);
    self.incidentType = ko.observable(exitPass.IncidentType);
    self.permitType = ko.observable(exitPass.PermitType);
    self.outHour = ko.observable(exitPass.OutHour);
    self.inHour = ko.observable(exitPass.InHour);
    self.place = ko.observable(exitPass.Place);
    self.subject = ko.observable(exitPass.Subject);
    self.securityStaffId = ko.observable(exitPass.SecurityStaffId || 0);
    self.authorizer = ko.observable(exitPass.Authorizer || 0);
    self.notes = ko.observable(exitPass.Notes);
};

Any clue on how can I solve this? Do I have to create an array or something so I can assign that to the combo and get the value binded? Any help is appreciated.

Answer 1

你应该这样做

查看模型：

    var vm=function(){

    this.Combo1Array=ko.observableArray();
    function(exitPass) {
    var self = this;
    //your observable specific to function
    }

    $.ajax({
       //other stuff
       success: function(data) {
       if (data.success) {
        self.Combo1Array(data.data) // fill the observableArray here
           }
         }
       });

    }
ko.applyBindings(new vm());

查看：

<select id="cboAuthorizer" class="form-control" data-bind="options:$root.Combo1Array,optionsValue:'SupervisorId',optionsText:'SupervisorName',value:exitPass.authorizer">
</select>

$root 或 $data 根据范围使用的任何内容

options 文档给的很清楚here in ko docs

KnockoutJS 和 Jquery 如何动态填充组合

KnockoutJS and Jquery how to fill combo dynamically

jquery

knockout-2.0

knockout.js