gpt4 book ai didi

javascript - 阵列中的 knockout 阵列

转载 作者:行者123 更新时间:2023-11-30 21:16:47 28 4
gpt4 key购买 nike

我正在尝试使用 Knockout 创建一个简单的电子表格。我试图让每个单元格都可观察,以便在发生变化时,我可以评估值并进行相应的计算。因此,如果他们在单元格中输入 6+7,我可以评估并将该值更改为总数。

但是,我无法让每个单元格都可见。也许我做错了。

我曾尝试创建一个 fiddle ,但现在正在努力加载 jquery。因此,尽管我可以在本地 Visual Studio 中运行它,但 fiddle 会提示 $. (任何解决问题的帮助都会很棒)。

http://jsfiddle.net/tr9asadp/1/

我像这样生成我的可观察数组:self.RowCount = ko.observable(0); self.ColumnCount = ko.observable(0);

self.Columns = ko.observableArray([]);
self.Rows = ko.observableArray([]);

self.Refresh = function () {

for (i = 0; i < self.RowCount(); i++) {
var obj = {
data: i + 1,
calculated: i,
rowNum: i,
colNum: 0,
columns: ko.observableArray([])
};

for (j = 0; j < self.ColumnCount(); j++) {
obj.columns.push(ko.observable({
label: self.Letters[j],
value: j + 1,
colIndex: j,
rowIndex: i
}));
}
self.Rows.push(obj);

}
self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0);

我根据用户输入的列和行呈现一个表格(目前,限制为 5 x 5,因为我使用数组将 1、2、3(列)转换为 A、B、C。但是这是暂时的,将被修复。

如何让每个单元格都可见,以便我可以订阅并在发生变化时触发事件?

最佳答案

您似乎没有使用cellObject(来自您的 fiddle )。如果您将 cellObject 类型的对象添加到行中,并且其中有一个针对 value 的可观察对象,您可以订阅它的更改。

固定代码:

var cellObject = function() {
var self = this;
self.data = ko.observable();
self.calculated = ko.observable();
self.rowNum = ko.observable(0);
self.colNum = ko.observable(0);
self.rows = ko.observableArray([]);
self.value = ko.observable();
}

function SpreadsheetViewModel() {
var self = this;
self.ShowSheet = ko.observable(false);
self.ShowSheet(false);

self.Letters = ['A', 'B', 'C', 'D', 'E']


self.RowCount = ko.observable(0);
self.ColumnCount = ko.observable(0);

self.Columns = ko.observableArray([]);
self.Rows = ko.observableArray([]);

function valueChanged(newValue) {
console.log("Value changed to " + newValue);
}

self.Refresh = function() {

for (i = 0; i < self.RowCount(); i++) {
var row = {
cells: ko.observableArray([])
};

for (j = 0; j < self.ColumnCount(); j++) {
var cell = new cellObject();
cell.label = self.Letters[j];
cell.data(i + 1);
cell.calculated(i);
cell.rowNum(i);
cell.colNum(j);
cell.value(j + 1);

cell.value.subscribe(valueChanged);
row.cells.push(cell);
}
self.Rows.push(row);

}
self.ShowSheet(self.RowCount() > 0 && self.ColumnCount() > 0);
}

self.Refresh();

}

var vm = new SpreadsheetViewModel();
ko.applyBindings(vm);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="spreadsheetSection">

<div class="row">
<div class="col-xs-3 text-right">No. of Columns</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="Columns" data-bind="value: ColumnCount">
</div>
<div class="col-xs-3 text-right">No. of Rows</div>
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="Rows" data-bind="value: RowCount">
</div>
<div class="col-xs-2">
<button class="btn btn-default" data-bind="click: Refresh">Refresh</button>
</div>
</div>
<div class="row">
<!-- ko if: ShowSheet -->
<table class="table table-bordered table-hover table-striped">
<tbody>
<tr data-bind="foreach: Rows()[0].cells">
<td>
<span data-bind="text: label"></span>
</td>

</tr>
</tbody>
<tbody data-bind="foreach: Rows">
<tr data-bind="foreach: cells">
<td>
<input type="text" class="form-control" data-bind="value: value">
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
</div>

固定 fiddle :https://jsfiddle.net/tr9asadp/3/

关于javascript - 阵列中的 knockout 阵列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45603316/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com