Счетчик не работает динамически?

Question

Можно ли динамически изменять число приращения счетчика каждый раз, когда генерируется новая строка темы, как показано ниже?

Число приращения счетчика не изменяется при динамическом создании новой строки темы?

Если бы можно было предоставить новую скрипку, это было бы очень признательно, так как я все еще новичок в кодировании.

скрипка

Благодарю вас!

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);

Answer 1

Ваша проблема не имеет ничего общего с Knockout, но с счетчиками CSS.

Вам нужно сбросить свой section сначала счетчик, но вы должны сделать это на уровне "контейнера":

.list {
    counter-reset: section;
}

.number:after {
    counter-increment: section;
    content: " " counter(section) ". ";
}

И добавьте класс "список" к вашему 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>