简体   繁体   中英

Accessing object fields in observable array of objects. KnockoutJS

I have a table, that is filled through data-binds with data from observable array of objects (persons). When i click a certain cell of table, index of a line, and index of a cell is written into variables "self.currentLine" and "self.currentCell", while input appears above with 100% width and 100% height, covering that data with itself. Is there a possibility to get access to certain field of certain object in observable array, using only indexes of fields instead of using field names? (ex. not self.persons[0]'name', but self.persons[0][0])

Here is a code(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());

And HTML code i use:

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

In html i set input visible according to cell clicked in the table. So now i need to pass a value of a cell to an input, so i could edit this data.

UPDATE: as usual, i've forgot to put round brackets '()' after value: name() in input. But here comes second question. As i know value must be automaticly changed while input loses his focus. But mine doesn't change...

Use the input value binding to to pass a value of a cell:

AFAIK, there is no way to access a field with its supposed index, to read a field from an object in observableArray you may use this syntax : persons()[index].fieldName() , given that the field is observable also.

hope it help.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM