Question

我一直在使用一个简单的表编辑器，使用knockoutjs和jquery来编辑简单的时间轴。我的对象模型是这样的：

var timelineEditor = function(data) {
    var self = this;
    self.rowCount = data.Cells.length;
    self.rows = ko.observableArray([]);
    self.name = ko.observable(data.Name);
    self.filename = ko.observable(data.FileName);
    self.keyIdentifier = ko.observable(data.identifier);
    for (var i = 0; i < data.Cells.length; i++) {
        self.rows.push(new timelineEditorRow(data.Cells[i], self));
    }
};

var timelineEditorRow = function(dataRow, parent) {
    var self = this;
    var $parent = parent;
    self.cells = ko.observableArray([]);
    for (var i = 0; i < dataRow.length; i++) {
        self.cells.push(new timelineEditorCell(dataRow[i], self));
    }
};

var timelineEditorCell = function(dataCell, parent) {
    var self = this;
    var $parent = parent;
    self.text = ko.observable(dataCell.Text);
    self.isItemEditing = ko.observable(false);
    self.editItem = function() {
        self.isItemEditing(true);
    };
    self.finishEdit = function() {
        self.isItemEditing(false);
    }
};

我这样绑定：

<div id="EditorDiv">
    <table data-bind="foreach: rows">
        <tr data-bind="foreach: cells">
            <td>
                <span data-bind ="text: text, visible: !isItemEditing(), click: editItem, blur: finishEdit"></span>
                <textarea  data-bind="text: text, visible: isItemEditing"></textarea>
            </td>
        </tr>
    </table>
</div>

现在，当我点击任何一个单元格时，小编辑器会显示出来并且事情很有效。但是，我的问题是，如何保持跨度（用于显示）和textarea（用于编辑）相同的大小？显然，我可以设置width和height属性，但由于这些属性包含在表中，因此需要由行（父级）设置高度，并且需要通过表列设置宽度（当前不在层次结构）。

有关如何重新组织对象模型以使其可行的任何建议吗？

淘汰可编辑表格问题

0 个答案: