5

contenteditable divのリストにバインドされた監視可能な配列があります。「追加」ボタンがあります。クリックすると、オブジェクトを配列に追加し、対応する div にフォーカスを移したいと考えています。

<ul id='list' data-bind="foreach: array">
  <li>
    <div contenteditable="true" data-bind="text: $data.text"></div>
  </li>
</ul>
<div id="add">+</div>

JavaScript

var viewModel = {
  array: ko.observableArray([])
};

ko.applyBindings(viewModel, document.getElementById('list'));

document.getElementById('add').onclick = function (evt) {
  var newObject = {text : ''};
  viewModel.array.push(newObject);
  // give focus to the newly created div
};

DOM要素を持つ観測可能なデータを取得することができますko.dataFor(dom)。データでDOMを取得するには?

http://jsfiddle.net/5rxdZ/

ありがとう

4

1 に答える 1

6

データ自体から DOM 要素を取得することはできません。ただし、このシナリオでは、hasfocusバインディングを使用してフォーカスを新しい要素に移動できます。ドキュメントはこちら: http://knockoutjs.com/documentation/hasfocus-binding.html

新しい要素を配置hasfocus: trueするだけでもうまくいきます。

それ以外の場合、最初にレンダリングされた要素にフォーカスを適用したくない場合は、次のように、新しく作成された要素のフラグを渡すことができます。

<ul id='list' data-bind="foreach: array">
  <li>
    <div contenteditable="true" data-bind="hasfocus: $data.focused, text: $data.text"></div>
  </li>
</ul>
<div id="add">+</div>

ビュー モデル:

var newObject = {text : '', focused: true};
viewModel.array.push(newObject);

サンプル: http://jsfiddle.net/rniemeyer/jnHK8/

于 2013-01-09T14:32:56.730 に答える