Counter-Increment не работает динамически?

Question

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

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

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

Fiddle

Спасибо!

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 counters.

Вам нужно сбросить 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/

Более новое решение будет состоять в том, чтобы использовать $index для создания вашей метки, например:

<label data-bind="text: 'Subject: ' + ($index() + 1) + '.'"></label> 

Демонстрация http://jsfiddle.net/gqjgko04/1/.

Или использование контейнера меньше синтаксиса для удаления конкатенации:

<label>Subject: <!-- ko text: $index() + 1 --><!-- /ko -->. </label>