knockout.js - 当剔除变量为“真”时突出显示文本？

Question

当用户单击页面上给定元素的“编辑”时，我想突出显示正在编辑的内容的文本，这样用户就不必单击输入区域。

我有以下内容：

var ViewModel = function () {
    var self = this;
    self.title = ko.observable("title");
    self.editing = ko.observable(false);
    if (self.editing()) {
       // highlight text in DOM?
    }
};

ko.applyBindings(new ViewModel()); 

这是 jsFiddle：http: //jsfiddle.net/PTSkR/85/

如何才能做到这一点？

Answer 1

在您的视图中使用 hasfocus 绑定。一般来说，如果可能的话，任何特定于视图的东西都应该被排除在虚拟机之外，并且应该通过内置绑定或自定义绑定来处理。

<input class="title-input" data-bind="value: title, hasfocus: editing"

更新了你的小提琴：http: //jsfiddle.net/PTSkR/87/

更新：可以使用自定义绑定来选择输入文本。其他人已经回答了如何做到这一点： https ://stackoverflow.com/a/12297619/2421292

Answer 2

CSS绑定： -

<input class="title-input" data-bind="value: title, css: {HL : editing()}"/>

CSS：

.HL {
    background: #ffff99; 
    color: #000000;
    }