knockout.js Textwechsel hängt vom Zähler ab

Question

Ich bin neu zu knockout und ich mag es, einen Text ändern Wert hängt von einem Zähler. Kann es mit Observable getan werden oder muss ich ein Abonnement machen? Ich mache Udacity js Design-Muster natürlich und es hat keine Abdeckung Abonnement , aber wenn ich für ähnliche Lösung von diesem google es verwendet Dank für die Hilfe!

<h3 data-bind="text: catLevel"></h2> 
    <div data-bind="text: clickCount"></div> 

this.incrementCounter = function(){ 
    this.clickCount(this.clickCount()+1); 
    //if (this.ClickCount > 10){ 
    //this.catLevel='Infant'; 
    //} 

     this.catLevel = ko.computed(function() { 
     if(this.clickCount>10){ 
      return "Infant"; 
     }else{ 

      return "Newborn"; 
     } 
    //return this.firstName() + " " + this.lastName(); 
}, this); 
}; 

https://jsfiddle.net/launeric/b3929xcr/#&togetherjs=GkChVL86zO

Answer 1

var viewModel = function() { 
    this.name = ko.observable('Tabby'); 
    this.clickCount = ko.observable(0); 
    this.catLevel = ko.observable('Newborn'); 
    this.imgSrc = ko.observable('https://static.pexels.com/photos/33358/cat-fold-view-grey-fur.jpg'); 
    this.imageAttribution = ko.observable('https://www.flickr.com/photos/onesharp/9648464288'); 
    this.incrementCounter = function() { 
    this.clickCount(this.clickCount() + 1); 
    if (this.clickCount() > 10) { 
     console.log("brabra"); 
     this.catLevel("inFant"); 
    } 
    }; 
} 

ko.applyBindings(new viewModel()); 

http://jsbin.com/tiyijer/edit?html,css,js,console,output

Answer 2

Zunächst einmal nicht Ihre berechnete Definition in Ihrem Inkrementfunktion nicht. Sie definieren die Berechnung jedes Mal neu, wenn die Funktion ausgeführt wird, wodurch der Zweck einer Berechnung nicht erfüllt wird.

Denken Sie daran, dass Sie den Wert von clickCount abrufen müssen (eine Observable ist eine Funktion). Ihr Code sollte also so aussehen:

this.catLevel = ko.computed(function() { 
    if (this.clickCount() > 10) { 
     return "Infant"; 
    } else { 
     return "Newborn"; 
    } 
    }, this); 

    this.incrementCounter = function() { 
    this.clickCount(this.clickCount() + 1); 
    };