javascript - 带有动态可观察值和 html 模板的 knockout 网格

Question

我正在尝试使用动态可观察值和 html 模板来实现 knockout 网格。

JSFiddle在这里。

我创建了两个模板，读取和写入。当单击单元格时，它应该转换为可编辑模式。但它应用编辑模板来完成专栏。有人可以帮忙吗？

var DynamicObservable = function(data) {
    for (var key in data) {
        this[key] = ko.observable(data[key]);
    }
    
    selectedCell = ko.observable();
    
    templateToUse = function(item) {
        return item === this.selectedCell() ? 'write' : 'read';
    };
};

var ViewModel = function(data) {
    var self = this;
    self.items = ko.observableArray(ko.utils.arrayMap(data, function(i) {
        return new DynamicObservable(i);
    }));
    self.columns = ko.observableArray();
    for (var key in data[0]) {
        self.columns.push(key);
    }
    
    self.cellClick = function(){
        debugger;
        
    };
}

var init = [
    { name: "John", age: 23, weight: 145 },
    { name: "Tim", age: 25, weight: 143 },
    { name: "Alex", age: 22, weight: 142 }
];

ko.applyBindings(new ViewModel(init));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<b>Click on cell to edit</b>

<table>
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: items, as: 'item'}">
        <tr data-bind="foreach: $parent.columns">
            <td data-bind="template: { name: templateToUse }, event:{click:selectedCell}"> </td>
        </tr>
    </tbody>
</table>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

<script id="read" type="text/html">
    <div data-bind="text: item[$data]"></div>    
</script>

<script id="write" type="text/html">
    <input type="text" data-bind="value: item[$data]"/>  
</script>

Answer 1

我相信这可以简化，但它正在发挥作用。以前，“templateToUse”函数中没有检查单击了哪一行。

已更新JSFiddle here

var DynamicObservable = function(data, rowIndex, parentSelectedRowIndex,parentSelectedColumnName) {
    self = this
    for (var key in data) {
        self[key] = ko.observable(data[key]);
    }
    
    self.selectCell = function(columnName) {
        parentSelectedRowIndex(rowIndex)
        parentSelectedColumnName(columnName)
    }
    
    self.templateToUse = function(columnName) {
        return rowIndex == parentSelectedRowIndex() && columnName == parentSelectedColumnName () 
                        ? 'write' : 'read';
    };
};

var ViewModel = function(data) {
    var self = this;
    
    self.parentSelectedRowIndex = ko.observable(null);
    self.parentSelectedColumnName = ko.observable(null);
    
    self.items = ko.observableArray(ko.utils.arrayMap(data, function(i) {
        var myIndex = data.indexOf(i);
        return new DynamicObservable(i, myIndex, self.parentSelectedRowIndex, self.parentSelectedColumnName);
    }));
    self.columns = ko.observableArray();
    for (var key in data[0]) {
        self.columns.push(key);
    }
    
    self.cellClick = function(){
        debugger;
        
    };
}

var init = [
    { name: "John", age: 23, weight: 145 },
    { name: "Tim", age: 25, weight: 143 },
    { name: "Alex", age: 22, weight: 142 }
];

ko.applyBindings(new ViewModel(init));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<b>Click on cell to edit</b>

<table>
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: items, as: 'item'}">
        <tr data-bind="foreach: $parent.columns">
            <td data-bind="template: { name: item.templateToUse }, event:{click:item.selectCell}"> </td>
        </tr>
    </tbody>
</table>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

<script id="read" type="text/html">
    <div data-bind="text: item[$data]"></div>    
</script>

<script id="write" type="text/html">
    <input type="text" data-bind="value: item[$data]"/>  
</script>

传递“parentSelected”可观察值有点困惑，如果我想到更好的方法来做到这一点，我会发布更新。