knockout.js establecer el foco en una plantilla

¿Cómo puedo usar knockout.js para establecer el foco en un elemento que fue creado por una plantilla vinculada a una matriz?knockout.js establecer el foco en una plantilla

Tengo una matriz observable vinculada a una tabla, donde cada fila es un conjunto de elementos de entrada para permitir que se editen las propiedades del elemento de la matriz. En la parte inferior hay un botón "Add" que introduce un nuevo elemento en la matriz y crea una nueva fila de campos de entrada.

Lo que intento hacer es tener el foco establecido en el primero de los campos de entrada recién creados después de presionar el botón "Add".

HTML:

<html> 
    <head> 
    <script src="http://cdn.jsdelivr.net/knockout/3.0.0/knockout.debug.js"></script> 
    </head> 
    <body> 
    <table data-bind='foreach: Attributes'> 
     <tr> 
     <td><input type='text' data-bind='value: Name, disable: HardCoded/></td> 
     <td><input type='text' data-bind='value: Description'/></td> 
     <td><button data-bind="click: $parent.removeAttribute">Delete</button></td> 
     </tr> 
    </table> 
    <button data-bind="click: addAttribute">Add attribute</button> 
    </body> 
</html>

Javascript:

function Attribute(id, name, description, hardcoded) { 
    var self=this; 
    self.AttributeID=ko.observable(id || 0); 
    self.Name=name || ''; 
    self.Description=description || ''; 
    self.HardCoded=hardcoded || false; 
    self.nameFocus = true; 
} 

function AttributeSchema(attributeArray) { 
    var self=this; 

    // Properties 
    self.Attributes=ko.observableArray(attributeArray); 

    // Operations 
    self.addAttribute=function() { 
    self.Attributes.push(new Attribute()); 
    }; 

    self.removeAttribute=function() { 
    self.Attributes.remove(this); 
    }; 
} 

var vmSchema=new AttributeSchema(
    [ 
    new Attribute(5, 'FirstName', 'First Name', true), 
    new Attribute(6, 'LastName', 'Last Name', true), 
    new Attribute(7, 'Blah', 'Blah', false) 
    ] 
); 

ko.applyBindings(vmSchema);

Fuente

2012-02-26 Richard

Actualmente, tiene como código:

<input type='text' data-bind='value: Name, disable: HardCoded' />

se puede tratar de añadir la propiedad hasfocus: true:

<input type='text' data-bind='value: Name, disable: HardCoded, hasfocus: true' />

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

Fuente

2012-02-26 09:54:51

Muchas gracias, respuesta perfecta ! Knockout.js rocas! – Richard

Tengo un campo donde la visibilidad está determinada por una casilla de verificación y quería el campo para obtener un enfoque tan pronto como se hizo visible. El uso del enlace de enfoque hasfocus por defecto significaba que el campo se ocultaba tan pronto como perdía el foco.

Para resolver esto creó un hasFocus "unidireccional" vinculante como esto:

ko.bindingHandlers.koFocus = { 
    update: function (element, valueAccessor) { 
     var value = valueAccessor(); 
     var $element = $(element); 
      if (value()) { 
       $element.focus(); 
      } 
    } 
};

Volví a colocar:

data-bind="hasfocus: myObservable"

con:

data-bind="koFocus: myObservable"

Problema resuelto

Fuente

2013-02-21 23:03:47 79IT

Desenvolví el valorAccessor para poder pasar! MyObservable() también: 'var value = ko.unwrap (valueAccessor());' Luego simplemente marcó 'if (value)' en vez de 'if (value())' –

knockout.js establecer el foco en una plantilla

Respuesta

Cuestiones relacionadas