0

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());
4

1 に答える 1

0

ノックアウトoptionsバインディングは、デフォルトでオブジェクトに対して機能します。これが使用方法です。問題は、従業員ごとに新しいオブジェクトを作成しているため、配列が同じ値であっても、positions配列が持つオブジェクトとは異なるpositionオブジェクトを持つことです。employeeposition

位置を保存する方法を選択する必要があります。

このフィドルがoptionsValue行うように、バインディングを使用しidて従業員の位置をマッピングできます

<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);
            });

または、このフィドルが行うように、ループ内でpositionbyを検索し、それを従業員に渡す必要があります。ideach

$.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);
            });
于 2013-07-09T16:26:00.907 に答える