每次生成新的主题行时,是否可以动态更改计数器增量编号,如下所示?
动态生成新主题行时,计数器增量编号不会改变吗?
如果可以提供一个新的小提琴,我将非常感激,因为我还不熟悉编码。
谢谢!
HTML:
<button class="button" data-bind="click: addClass">Add a New Class</button>
<button class="button">
Apply
</button>
<hr>
<ul align="center" data-bind="foreach: classes">
<li>
<label class="number">Subject:</label><input type="text" data-bind="value: title" placeholder="E.g: English"/>
<select disabled data-bind="value: credits">
<option selected data-bind="value: credits">1</option>
</select>
<label>Grade:</label>
<input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/>
<br>
<br>
</li>
</ul>
<hr />
<br>
<h4>
Your GPA is: <b><span data-bind="text: totalGPA"></span></b>
</h4>
<br>
<h4>
Final Grade: <span data-bind="text: totalGrade"></span>
</h4>
CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400);
* { text-rendering: optimizelegibility;}
body, input, textarea, select, button { font-family: 'Open Sans', sans-serif; }
pre { font-family: 'Inconsolata', monospace; }
span {font-size: 18px;}
h1 {font-size: 25px;}
.number {
counter-reset: subsection;
}
.number:after {
counter-increment: section;
content: " " counter(section) ". ";
}
JQuery的:
var gradeMapping = {
'A+': 15,
'A': 14,
'A-': 13,
'B+': 12,
'B': 11,
'B-': 10,
'C+': 9,
'C': 8,
'C-': 7,
'D+': 6,
'D': 5,
'D-': 4,
'E+': 3,
'E': 2,
'E-': 1
}
function Class(title, credits, letterGrade) {
var self = this;
self.title = ko.observable(title);
self.credits = ko.observable(credits);
self.letterGrade = ko.observable(letterGrade);
self.gpa = ko.computed(function() {
return gradeMapping[self.letterGrade()];
});
}
function GpaCalcViewModel() {
var self = this;
self.classes = ko.observableArray();
self.totalGPA = ko.computed(function() {
var totalWeightedGPA = 0,
totalCredits = 0;
$.each(self.classes(), function() {
totalWeightedGPA += (this.gpa() * this.credits());
totalCredits += (this.credits() * 1);
})
return totalWeightedGPA / totalCredits;
});
self.totalGrade = ko.computed(function() {
var totalWeightedGPA = 0,
totalCredits = 0;
var gradeLetter = null;
$.each(self.classes(), function() {
totalWeightedGPA += (this.gpa() * this.credits());
totalCredits += (this.credits() * 1);
});
$.each(gradeMapping, function(letter, number) {
if(number == Math.round(totalWeightedGPA / totalCredits)){
gradeLetter = letter;
}
})
return gradeLetter;
});
self.addClass = function() {
self.classes.push(new Class());
}
};
var viewModel = new GpaCalcViewModel();
ko.applyBindings(viewModel);
答案 0 :(得分:1)
您的问题与Knockout无关,但与CSS counters无关。
您需要先重置section
计数器,但必须在“容器”级别执行此操作:
.list {
counter-reset: section;
}
.number:after {
counter-increment: section;
content: " " counter(section) ". ";
}
并将“list”类添加到ul
:
<ul align="center" class="list" data-bind="foreach: classes">
演示http://jsfiddle.net/gqjgko04/
更多Knocout解决方案是使用$index
生成您的标签,例如:
<label data-bind="text: 'Subject: ' + ($index() + 1) + '.'"></label>
演示http://jsfiddle.net/gqjgko04/1/。
或者使用容器少的语法来删除字符串连接:
<label>Subject: <!-- ko text: $index() + 1 --><!-- /ko -->. </label>