Counter-Increment funktioniert nicht dynamisch?

Question

Ist es möglich, die Counter-Inkrement-Nummer bei jeder Generierung einer neuen Betreffzeile dynamisch zu ändern (siehe unten)?

Die Zählerinkrementierungsnummer ändert sich nicht, wenn eine neue Betreffzeile dynamisch generiert wird?

Wenn eine neue Geige bitte zur Verfügung gestellt werden könnte, wäre es sehr geschätzt, wie ich Codierung noch neu bin.

Fiddle

Vielen Dank!

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

Ihr Problem hat nichts mit Knockout zu tun, sondern mit CSS counters.

Zuerst müssen Sie Ihre section Zähler zurückgestellt, aber sie haben es auf der „Container“ Ebene zu tun:

.list { 
    counter-reset: section; 
} 

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

und fügen Sie die „Liste“ Klasse Ihren ul:

<ul align="center" class="list" data-bind="foreach: classes"> 

Demo http://jsfiddle.net/gqjgko04/

Eine weitere Lösung von Knocout wäre die Verwendung der $index, um Ihr Etikett zu generieren, etwa wie folgt:

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

Demo http://jsfiddle.net/gqjgko04/1/.

oder mit dem Behälter weniger Syntax, um die String-Verkettung zu entfernen:

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