knockout.js ustawić fokus w szablonie

Jak mogę użyć ustawienia knockout.js, aby ustawić fokus na elemencie utworzonym przez szablon powiązany z tablicą?knockout.js ustawić fokus w szablonie

Mam tablicę obserwowalną powiązaną z tabelą, gdzie każdy wiersz jest zbiorem elementów wejściowych, aby umożliwić edycję właściwości elementu tablicy. Na dole znajduje się przycisk "Add", który popycha nowy element do tablicy, tworząc nowy wiersz pól wprowadzania.

Próbuję ustawić ostrość na pierwsze z nowo utworzonych pól wejściowych po naciśnięciu przycisku "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);

Źródło

2012-02-26 Richard

Obecnie masz taki kod:

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

można spróbować dodać właściwość hasfocus: true:

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

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

Źródło

2012-02-26 09:54:51

Dziękuję bardzo, idealna odpowiedź ! Knockout.js rocks! – Richard

mam pole, gdzie widoczność jest określony przez pole wyboru i chciałem boiska i skupić się tak szybko, jak to stało się widoczne. Korzystanie z domyślnego powiązania hasfocus oznaczało, że pole stało się ukryte, gdy tylko straciło ostrość.

Aby rozwiązać ten problem, że powstanie "jednokierunkowy" wiązanie tak hasfocus:

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

Następnie wymienić:

data-bind="hasfocus: myObservable"

data-bind="koFocus: myObservable"

Problem rozwiązany

Źródło

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

Odwijałem wartośćAccessor, więc mogłem przekazać! MyObservable() również: 'var value = ko.unwrap (valueAccessor());' Następnie wystarczy sprawdzić 'if (value)' zamiast 'if (value())' –

knockout.js ustawić fokus w szablonie

Odpowiedz

Powiązane problemy