使用Knockout.js选择()输入字段

Question

我是Knockout.js的新手.

什么是最好的,以这样select()的<input />,当它变得可见？

视图:

<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasfocus: editing" />
</p>

视图模型:

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function() { this.editing(true) }
}

ko.applyBindings(new PersonViewModel("Bert Bertington"));

http://knockoutjs.com/documentation/hasfocus-binding.html

http://jsfiddle.net/RnCUd/

谢谢!

Answer 1

您可以创建新的绑定来处理选择.

ko.bindingHandlers.selected = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected) element.select();
    }
};

将此绑定添加到输入字段.

<input data-bind="visible: editing, value: name, hasfocus: editing, selected: editing" />

这是一个小提琴:http://jsfiddle.net/RnCUd/2/

或者,您可以创建一个包装hasfocus绑定的自定义绑定:

ko.bindingHandlers.hasSelectedFocus = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers['hasfocus'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    },        
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers['hasfocus'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);        

        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected) element.select();
    }
};

hasfocus如果observable为true,则此绑定仅将初始化和更新委托给并负责选择元素.用它代替hasfocus.

<input data-bind="visible: editing, value: name, hasSelectedFocus: editing" />

这是一个小提琴:http://jsfiddle.net/RnCUd/1/