javascript - ノックアウト js. テーブルから要素を取得し、現在の要素として設定します。

Question

私はいくつかの問題を抱えています。地理サービスを使用して Web アプリを作成しています。'Queuers' の observableCollection と、そのコレクションの 'Queue' を表すプロパティ SelectedItem を含む ViewModel があります。テーブルからの SelectedItem セットの値:

<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>

および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([]);
        };
    }

ご覧のとおり、ObservaleCollection で操作するロジックがいくつかあります。そして、すべてが完璧に機能します。

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

私は私の中に欲しい

<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>

SelectedElement の現在の値があります。そして、アクセスする方法はプロパティです（数値、色など...）