淘汰赛未绑定模型的问题

Question

我有一个与淘汰赛绑定到模型的问题，这是我的代码。 该代码将触发并返回一个JSON对象，但表为空。 任何建议，将不胜感激。

的HTML

  <table  style="border: double">
   <thead>
    <tr>
     <td>jobId</td>
    </tr>
   </thead>
   <!--Iterate through an observableArray using foreach-->
   <tbody data-bind="foreach: Jobs">
    <tr style="border: solid" data-bind="click: $root.getselectedjob" id="updtr">
    <td><span data-bind="text: $data.jobId "></span></td>
    </tr>
   </tbody>
  </table>

Java脚本

var JobViewModel = function () {
    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI 
    self.jobId = ko.observable("");
    self.name = ko.observable("");
    self.description = ko.observable("");

    //The Object which stored data entered in the observables
    var jobData = {
        jobId: self.jobId,
        name: self.name,
        description: self.description
    };

    //Declare an ObservableArray for Storing the JSON Response
    self.Jobs = ko.observableArray([]);

    GetJobs(); //Call the Function which gets all records using ajax call

    //Function to Read All Employees
    function GetJobs() {
        //Ajax Call Get All Job Records
        $.ajax({
            type: "GET",
            url: "/Client/GetJobs",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                debugger;
                self.Jobs(data); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        //Ends Here
    }

    //Function to Display record to be updated. This will be

    //executed when record is selected from the table
    self.getselectedjob = function (job) {
        self.jobId(job.jobId),
        self.name(job.name),
        self.description(job.description)
        //,
        //self.DeptName(employee.DeptName),
        //self.Designation(employee.Designation)
    };


};
ko.applyBindings(new JobViewModel());

C＃获得工作的方法

    public ActionResult GetJobs(string AccountIDstr)
    {
        //parse this as parameter
        int AccountID = Convert.ToInt32(AccountIDstr);
        AccountID = 1;

        var jobs = (from c in db.jobs
                          select c).OrderByDescending(m => m.jobId).ToList();

        //"Business logic" method that filter jobs by the account id
        var jobsFilter = (from e in jobs
                                 where (AccountID == null || e.accountId == AccountID)
                                 select e).ToList();


        var jobsresult = from jobrows in jobsFilter
                      select new
                      {
                          jobId = jobrows.jobId.ToString(),
                          name = jobrows.name,
                          description = jobrows.description
                      };

        return Json(new
        {
            Jobs = jobsresult
        },
                    JsonRequestBehavior.AllowGet);
    }

JSON对象

{"Jobs":[{"jobId":"5","name":"Job 5 ","description":"Job 5 description"},{"jobId":"1","name":"Job 1 ","description":"Job 1 description"}]}

Answer 1

您的Jobs是一个observableArray，但数据包装在一个对象中。 在GetJobs设置值时，您应该做的是

self.Jobs(data.Jobs);

这是一个可运行的代码段。 您应该能够使用ajax函数运行此操作以填充数据。 如果它不起作用，请检查您得到了什么。

 var JobViewModel = function() { //Make the self as 'this' reference var self = this; //Declare observable which will be bind with UI self.jobId = ko.observable(""); self.name = ko.observable(""); self.description = ko.observable(""); //The Object which stored data entered in the observables var jobData = { jobId: self.jobId, name: self.name, description: self.description }; //Declare an ObservableArray for Storing the JSON Response self.Jobs = ko.observableArray([]); GetJobs(); //Call the Function which gets all records using ajax call //Function to Read All Employees function GetJobs() { //Ajax Call Get All Job Records var data = { "Jobs": [{ "jobId": "5", "name": "Job 5 ", "description": "Job 5 description" }, { "jobId": "1", "name": "Job 1 ", "description": "Job 1 description" }] }; setTimeout(function() { self.Jobs(data.Jobs); }, 500); } //Function to Display record to be updated. This will be //executed when record is selected from the table self.getselectedjob = function(job) { self.jobId(job.jobId), self.name(job.name), self.description(job.description) //, //self.DeptName(employee.DeptName), //self.Designation(employee.Designation) }; }; ko.applyBindings(new JobViewModel()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> <table style="border: double"> <thead> <tr> <td>jobId</td> </tr> </thead> <!--Iterate through an observableArray using foreach--> <tbody data-bind="foreach: Jobs"> <tr style="border: solid" data-bind="click: $root.getselectedjob" id="updtr"> <td><span data-bind="text: $data.jobId "></span> </td> </tr> </tbody> </table>