访问可观察对象数组中的对象字段。 KnockoutJS

时间:2013-04-17 11:51:29

标签: javascript knockout.js ko.observablearray

我有一个表,通过数据绑定来填充来自可观察对象(人)数组的数据。当我点击表格的某个单元格时,一行的索引和一个单元格的索引被写入变量“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中,根据表格中单击的单元格设置输入可见。所以现在我需要将一个单元格的值传递给一个输入,所以我可以编辑这些数据。

更新:像往常一样,我忘了在输入后的值:name()之后放置括号'()'。但这是第二个问题。据我所知,当输入失去焦点时,必须自动改变价值。但我的不会改变......

1 个答案:

答案 0 :(得分:3)

使用输入value绑定来传递单元格的值:

AFAIK,无法访问具有其假定索引的字段,要从observableArray中的对象读取字段,您可以使用以下语法:    persons()[index].fieldName(),因为该字段也是可观察的。

希望它有所帮助。