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

Ответы

Ответ 1

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

<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

Ответ 2

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

Чтобы решить эту проблему, я создал привязку "oneway" 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"

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