预选使用淘汰赛在选择框中的值

Question

谁能告诉我如何我可以预先从基于从ajax调用回传的对象的下拉列表中选择一个值。我一直在经历淘汰赛的教程，并一直在尝试一些事情。它从不根据员工的职位对象在下拉列表中选择正确的值。下面是我的代码，这里是一个链接到我的小提琴

http://jsfiddle.net/ricobano/HcRVH/1/

<div data-bind="foreach: employees"> 
    <div> 
     <label>Full Name</label> 
     <input data-bind="value: fullName" /> 
     <label>Position</label> 
     <select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name'"></select> 
     <label>Salary:</label><span data-bind="text: position().salary"></span> 
    </div> 
</div> 

function Employee(fullname, position) { 
    var self = this; 
    self.fullName = ko.observable(fullname); 
    self.position = ko.observable(position); 
} 

function Position(id, name, salary) { 
    var self = this; 
    self.id = ko.observable(id); 
    self.name = ko.observable(name); 
    self.salary = ko.observable(salary); 
} 

function EmployeeVM() { 
    var self = this; 
    self.employees = ko.observableArray(); 

    self.Positions = [ 
    new Position(1, "No position", "0"), 
    new Position(3, "Web Developer", "15100"), 
    new Position(2, "Manager", "30000")]; 

    var data = { 
     json: $.toJSON([{ 
      "fullName": "Richard Banks", 
       "position": { 
        "id": 2, 
       "name": "Manager", 
        "salary": "30000" 
      } 
     }, { 
      "fullName": "Dave Grohl", 
       "position": { 
        "id": 3, 
       "name": "Web Developer", 
        "salary": "15100" 
      } 
     }, { 
      "fullName": "bobby rahul", 
       "position": { 
        "id": 3, 
       "name": "Web Developer", 
        "salary": "15100" 
      } 
     }]) 
    }; 

    $.ajax({ 
     url: "/echo/json/", 
     data: data, 
     type: "POST", 
     success: function (response) { 
      $.each(response, function (i, item) { 
       var e = new Employee(item.fullName, new Position(item.position.id, item.position.name, item.position.salary)); 
       self.employees.push(e); 
      }); 

      //alert($("#slTest").html()); 
     } 
    }); 
} 

ko.applyBindings(new EmployeeVM()); 

Answer 1

淘汰赛上的对象options绑定工作，在默认情况下，这是你如何使用它。问题是，positions数组与employee具有不同的position对象，即使它们具有相同的值，因为您正在为每个员工制作新的position对象。

您将不得不选择如何存储位置。

可以使用optionsValue绑定映射为员工位置的id，如this fiddle does

<select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name', optionsValue: 'id'"></select> 
--- 
$.each(response, function (i, item) { 
       var e = new Employee(item.fullName, item.position.id); 
       self.employees.push(e); 
      }); 

，或者你将不得不id在each循环来查找position，并把它传递给员工，如this fiddle那样

$.each(response, function (i, item) { 
       var position = ko.utils.arrayFirst(self.Positions, function(p) { 
        return p.id() == item.position.id; 
       }); 
       var e = new Employee(item.fullName, position); 
       self.employees.push(e); 
      });