淘汰赛js。 从表中获取元素并将其设置为当前元素。

Question

I have some trouble. I write a web app with geo services. There is a ViewModel thar contains an observableCollection of 'Queuers' and the propery SelectedItem that represent a 'Queue' from that collection. The value of SelectedItem sets from table:

<tbody data-bind="foreach: Queuers">
                        <tr>
                            <td class="text-center">
                                <span data-bind="text: Number"></span>
                            </td>
                            <td class="text-center">
                                <i class="icon-flag icon-2x" data-bind="style: { color: Color }"></i>
                            </td>
                            <td class="text-center">
                                <span data-bind="text: Length"></span>
                            </td>
                            <td class="text-center">
                                <span data-bind="text: Resolution"></span>
                            </td>
                            <td class="text-center">
                                <button style="background: none; border: none" data-bind="click: $root.getData" @*onclick="$('#myModal').modal()"*@>
                                    <i class="icon-thumbs-up-alt icon-2x"></i>
                                </button>
                            </td>
                            <td class="text-center">
                                <button style="background: none; border: none" data-bind="click: $root.remove">
                                    <i class="icon-trash icon-2x"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>

and ViewModel:

 var Query = function (number, color, length, res, data) {

        this.Number = ko.observable(number);
        this.Color = ko.observable(color);
        this.Length = ko.observable(length);
        this.Resolution = ko.observable(res);
        this.Data = ko.observable(data);

    };

    function TwoDimViewModel() {
        var self = this;
        self.SelectedItem = ko.observable();
        self.SelectedColor = ko.observable(); //just for test
        self.Queuers = ko.observableArray();
        self.remove = function (q) {
            self.Queuers.remove(q);
        };
        self.getData = function (q) {
            self.SelectedItem = q;
            self.SelectedColor = q.Color(); //just for test
        self.addQ = function (q) {
            self.Queuers.push(q);
        };
        self.removeAll = function () {
            self.Queuers([]);
        };
    }

As you see, there is some logic to manipulate with ObservaleCollection. And all work perfect expect one:

self.getData = function (q) {
            self.SelectedItem = q; 
    }

I want for in my

<div class="row" data-bind="visible: Queuers().length >= 1">
                <button class="btn btn-default" onclick="clearAll()">Clear all</button>
                <br />
                Current selected id: <span data-bind="text: SelectedItem() ? SelectedItem().Number() : 'select element'"></span>
                <br />
                Выбран цвет: <span data-bind="text: SelectedColor() ?  SelectedColor: 'nulll'"></span>
            </div>

there will be current value of SelectedElement. And how to get access to is property (Number, Color, etc...)

Answer 1

Change:

self.SelectedItem = q;
self.SelectedColor = q.Color();

To:

self.SelectedItem(q);
self.SelectedColor(q.Color());

Reference: http://knockoutjs.com/documentation/observables.html#observables