选择（）与Knockout.js输入字段(Select() Input Field with Kno

我是新来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和需要选择的元素，如果观察到的是真正的关心。用它代替hasfocus 。

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

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

Answer 2:

我试图用一个文本字段，也采用了valueUpdate一起使用约翰Earles自定义绑定以上（感谢约翰！）：“afterkeydown”结合，结果发现，这并没有真正按预期工作。（我猜，这是因为所有绑定再次触发时，绑定一个需要火了，valueUpdate最可能的原因值绑定火每个角色已被写入之后）。

一对夫妇的尝试后，我做了一个半修复此问题似乎是为我好吗工作。其基本思路是，在我们火hasfocus结合我们检查，如果有问题的元素已经具有焦点，我们只有实际选择时其文本元素实际上没有焦点hasfocus绑定已经被炒了鱿鱼。

我已经使用jQuery来检查焦点，但你也许可以做到这一点在一些其他的方式为好。

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) {
        var focusBefore = $(element).is(':focus');
        ko.bindingHandlers['hasfocus'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected && !focusBefore) {
            element.select();   
        }
    }
};

编辑：我注意到，只要你想在iOS设备上使用时，这种结合可能不完全正常工作。这没有什么错这样绑定的，但自动对焦并选择逻辑使设备键盘尽快拿出为结合执行可能会或可能不是你想要这样的设备上要发生的事情是。为了比较，对我用它来测试我不立即自动获得键盘，因为这结合执行Android设备。为了我的缘故，我结束了创建另一个结合做iOS设备没有按以下方式。

ko.bindingHandlers.hasNonIosSelectedFocus = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (navigator.userAgent.match(/iPad/i) == null && navigator.platform.indexOf("iPhone") == -1 && navigator.platform.indexOf("iPod") == -1) {
            ko.bindingHandlers['hasSelectedFocus'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (navigator.userAgent.match(/iPad/i) == null && navigator.platform.indexOf("iPhone") == -1 && navigator.platform.indexOf("iPod") == -1) {
            ko.bindingHandlers['hasSelectedFocus'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        }
    }
};

TL;博士：

如果您使用此，想迎合平板电脑/智能手机的话一定要检验，这是你真正所期望的交互逻辑。

文章来源: Select() Input Field with Knockout.js