我正在使用 Knockout.js 迈出第一步,制作一个(相当复杂的)表格来计算未付发票的利息,同时牢记部分付款、成本和合同罚款。
计算将在 PHP 中处理,因为我在 PHP 方面比在 JS 方面更有经验。Knockout 正在处理添加新表单字段的动态,使表单即使在最复杂的情况下也可以灵活使用。
为了能够正确提取数据,我将通过 post 到 PHP 提供三个多维数组:
- 发票[$i][名称] / 发票[$i][金额] / 发票[$i][日期] / ...
- 付款[$j][姓名] / ...
- 成本[$k][名称] / ...
我似乎无法在 JS 中解决的问题是 Knockout.js 应该生成一个新的表单元素,并且应该分配一个唯一的编号(我想)
data-bind="attr:{name: someFunctionToGiveUniqueName}"
我已经查看了 uniqueName 绑定,但我需要三个 uniqueNames,并且我应该能够自定义生成的名称以保持数据结构化。
这是我的视图模型(它可以工作,除了输入字段的不那么独特的命名):
<script type="text/javascript">
// Overall viewmodel
function ViewModel() {
var self = this;
// Data
self.Hoofdsom = ko.observableArray();
self.Betaling = ko.observableArray();
self.Kost = ko.observableArray();
self.hsBeschr = ko.observable();
self.hsBedrag = ko.observable();
self.hsVerval = ko.observable();
self.hsIntr = ko.observable();
self.hsIntrType = ko.observable();
self.hsSchadeType = ko.observable();
self.hsSchadePerc = ko.observable(10);
self.hsSchadeMin = ko.observable(0);
self.hsSchadeMax = ko.observable(1500);
// Initial State
self.Hoofdsom.push("new");
// Operations
self.addHoofdsom = function() {
self.Hoofdsom.push(self.Hoofdsom().length);
}
self.remHoofdsom = function(hfd){
self.Hoofdsom.remove(hfd);
}
self.addBetaling = function() {
self.Betaling.push(self.Betaling().length);
}
self.remBetaling = function(bet){
self.Betaling.remove(bet);
}
self.addKost = function() {
self.Kost.push(self.Kost().length);
}
self.remKost = function(kos){
self.Kost.remove(kos);
}
}
// Apply bindings
ko.applyBindings(new ViewModel());
</script>