如何做一个onmouseover文本绑定

How to do an onmouseover text binding?

本文关键字：文本 绑定 onmouseover 何做一      更新时间：2023-09-26

当鼠标悬停在元素上时，如何将文本绑定到元素上?

Javascript到目前为止:

self.books = ko.observable();
self.leftBooks = self.books() - self.allBooks();

相应的视图:

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

当鼠标悬停在按钮上时，我想显示leftBooks变量。当鼠标悬停离开时，我想显示books变量

给你:

http://jsfiddle.net/Ukv59/5/

我做了什么:

  • 为你的'leftBooks'创建一个计算观察对象
  • 为按钮标题
    • 创建一个计算观察对象
  • 添加了一些字段，以便您可以测试它是否实际工作
代码:

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);
}
编辑:亚历山大对他的答案的更新做了几乎相同的事情，但少了一个属性。在我看来，你是否希望引入额外的可观察的"showLeftBooks"是一个品味问题。我觉得它使代码的意图更清楚一些，但是如果您愿意，可以完全省略它。

使用event绑定:

Html: 

<button data-bind="text: booksTitle, event: {mouseover: mouseOver, mouseout: mouseOut}"></button>

JS: 

function ViewModel() {
    var self = this;
    self.books = ko.observable(10);
    self.allBooks = ko.observable(100);
    self.leftBooks = self.books() - self.allBooks();
    self.booksTitle = ko.observable(10);
    self.mouseOver = function () {
        self.booksTitle(self.leftBooks);
    }
    self.mouseOut = function () {
        self.booksTitle(self.books());
    }
}
演示

相关文章：