knockout.js установить фокус в шаблоне

Как использовать knockout.js для установки фокуса на элемент, который был создан шаблоном, связанным с массивом?knockout.js установить фокус в шаблоне

У меня есть наблюдаемый массив, привязанный к таблице, где каждая строка представляет собой набор элементов ввода, позволяющих редактировать свойства элемента массива. В нижней части находится кнопка "Add", которая подталкивает новый элемент в массив, создавая новую строку полей ввода.

То, что я пытаюсь сделать, это настроить фокус на первое из вновь созданных полей ввода после нажатия кнопки "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);

источник

2012-02-26 Richard

В настоящее время у вас есть такой код:

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

Вы можете попробовать добавить свойство hasfocus: true:

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

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

источник

2012-02-26 09:54:51

Большое спасибо, прекрасный ответ ! Скалы Knockout.js! – Richard

У меня есть поле, где видимость определяется флажком, и я хотел поле, чтобы получить фокус, как только он стал видимым. Использование привязки по умолчанию hasfocus означало, что поле стало скрытым, как только оно потеряло фокус.

Чтобы решить эту проблему, я создал "односторонний" HasFocus связывания, как это:

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

Затем я заменил:

data-bind="hasfocus: myObservable"

с:

data-bind="koFocus: myObservable"

Проблема решена

источник

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

Я развернул valueAccessor, чтобы я мог пройти в myObservable(): var value = ko.unwrap (valueAccessor()); 'Тогда просто проверили' if (value) ', а не' if (value()) ' –

knockout.js установить фокус в шаблоне

ответ

Смежные вопросы