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

Answers


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.


Need Your Help

2D grid image values to 2D array

arrays image image-processing grid autoit

I have an image containing a 2D grid like the image below and I want to put in an array in this format.

How to handle “switch/case” when new parameters added in SW release

c++ c switch-statement

How to handle when there is a new SW Release sometime and it adds another index to switch case. Index represents a parameter in this case. For example,

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.