javascript - How to do an onmouseover text binding? -

how can bind text element when mouse overs it?

javascript have far:

self.books = ko.observable(); self.leftbooks = self.books() - self.allbooks(); 

corresponding view:

<button data-bind="text: books"></button> 

when mouse hovers on button want show leftbooks variable. when mouse hover leaves want show books variable.

here go:

http://jsfiddle.net/ukv59/5/

what did:

• create computed observable 'leftbooks'
• create computed observable button caption
• added fields can test works

code:

self.allbooks = ko.observable(50); self.books = ko.observable(10); self.leftbooks = ko.computed(function () {     return self.allbooks() - self.books(); }); self.showleftbooks = ko.observable(false); self.buttontext = ko.computed(function () {     return self.showleftbooks() ? self.leftbooks() : self.books(); }); self.mouseover = function () {     self.showleftbooks(true); } self.mouseout = function () {     self.showleftbooks(false); } 

edit: alexander's update answer pretty same thing, 1 property less. in opinion it's matter of taste whether want opbservable 'showleftbooks' introduced. feel makes intention of code little more clear, can omit if like.