1

オブジェクトの観測可能な配列（人）からのデータでデータバインドを介して埋められたテーブルがあります。テーブルの特定のセルをクリックすると、行のインデックス、セルのインデックスが変数「self.currentLine」と「self.currentCell」に書き込まれますが、入力は幅100％、高さ100％で上に表示され、それをカバーしますデータ自体。フィールド名を使用する代わりにフィールドのインデックスのみを使用して、監視可能な配列内の特定のオブジェクトの特定のフィールドにアクセスする可能性はありますか? (例: self.persons[0]'name' ではなく、self.persons[0][0])

ここにコード（JS）があります：

function person(fullname, age, sex, married)
{
    this.name = ko.observable(fullname); //string, only observable field, while i'm trying to get this working properly.
    this.age = age;                      //Data
    this.sex = sex;                      //string
    this.married = married;              //bool
};

function personViewModel()
{
    var self = this;
    self.currentLine = ko.observable();
    self.currentCell = ko.observable();
    self.columnNames = ko.observableArray([
                'Name',
                'Age',
                'Sex',
                'Married'
    ]);

    self.persons = ko.observableArray([...]);

    };
    self.setLine = function(index)
    {
        self.currentLine(index);
    };
    self.setCell= function(cellIndex)
    {
        self.currentCell(cellIndex);
    };
};
ko.applyBindings(new personViewModel());

そして私が使用するHTMLコード：

<table>
        <thead data-bind="template: { name: 'tableHeader', data: columnNames }" />
        <tbody data-bind="template: { name: 'tableContent', foreach: persons }" />
    </table>

    <script id="tableHeader" type="text/html">
        <tr data-bind="foreach: $data">
                <td data-bind="text: $data,
                               css: { 'active': $root.currentItem() == $data }">
                </td>
        </tr>
    </script>

    <script id="tableContent" type="text/html">
        <tr data-bind="click: $root.setLine.bind($data, $index())">
            <td data-bind="click: $root.setCell.bind($data, $element.cellIndex)">
                <span data-bind="text: name"></span>
                <input type="text" data-bind="visible: $root.currentCell() == 0 && $index() == $root.currentLine(),
                                              value: name"/> <!--fixed-->
            </td>
        </tr>
    </script>

HTMLでは、テーブル内でクリックされたセルに従って入力を表示できるように設定しました。したがって、セルの値を入力に渡す必要があるため、このデータを編集できます。

更新:いつものように、入力の value: name() の後に丸括弧 '()' を入れるのを忘れていました。しかし、ここで 2 番目の質問が来ます。私が知っているように、入力がフォーカスを失っている間に値を自動的に変更する必要があります。でも私のは変わらない…

4

1 に答える 1

3

入力valueバインディングを使用して、セルの値を渡します。

私の知る限り、想定されたインデックスでフィールドにアクセスする方法はありません。observableArray のオブジェクトからフィールドを読み取るには、この構文を使用できます : persons()[index].fieldName()、フィールドも監視可能である場合。

それが役立つことを願っています。

于 2013-04-17T12:15:19.530 に答える