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

时间:2013-10-17 20:26:20

标签: javascript knockout.js

我遇到了麻烦。我用地理服务编写了一个Web应用程序。 有一个ViewModel thar包含一个observableCollection'Queuers'和一个来自该集合的'Queue'的属性SelectedItem。 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的当前值。 以及如何访问属性(数字,颜色等)

1 个答案:

答案 0 :(得分:0)

变化:

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

要:

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

参考:http://knockoutjs.com/documentation/observables.html#observables