使用Knockout.js选择（）输入字段 [英] Select() Input Field with Knockout.js

问题描述

我是Knockout.js的新手。

什么是 select（） code> an < input /> 当它变成可见的时候！

查看：

 < p> 
名称：
< b data-bind =visible：！editing（），text：name，click：edit>& nbsp;< / b> 
< input data-bind =visible：editing，value：name，hasfocus：editing/> 
< / p> 
  

ViewModel：

 < code //函数PersonViewModel（name）{
 // Data 
 this.name = ko.observable（name）; 
 this.editing = ko.observable（false）; 
 $ b // Behaviors 
 this.edit = function（）{this.editing（true）} 
} 
 
 ko.applyBindings（new PersonViewModel Bert Bertington））; 
  

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

http://jsfiddle.net/RnCUd/

谢谢！

解决

  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']。 
}，
 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/

I am new to Knockout.js.

What is the best way to select() an <input /> when it becomes visible?

View:

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

ViewModel:

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/

Thanks!

解决方案

You can create a new binding to handle selection.

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

Add this binding to your input field.

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

Here is a fiddle: http://jsfiddle.net/RnCUd/2/

---

Alternatively, you could create a custom binding which wraps the hasfocus binding:

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();
    }
};

This binding simply delegates initialization and update to hasfocus and takes care of selecting the element if the observable is true. Use it instead of hasfocus.

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

Here is a fiddle: http://jsfiddle.net/RnCUd/1/

这篇关于使用Knockout.js选择（）输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！