1

ノックアウト JS を使用して、テーブル内の Web サイト名と URL のペアの編集可能なリストを処理しています。新しいアイテムを追加するためのボタンが下にあります。私のコードは、リストとコレクションのチュートリアルに基づいています。

....
<tbody data-bind="foreach: website">
 <tr>
  <td><input data-bind="value: name, hasfocus: true" /></td>
  <td><input data-bind="value: url" /></td>
  <td><a href="#" data-bind="click: $root.removeWebsite">Remove</a></td>
 </tr>
</tbody>
</table>

<button data-bind="click: addWebsite" class="btn">Add another</button>

hasfocus: true新しい空白のフィールドが追加されるたびに、マウスでクリックする必要がないように使用することに注意してください。以下のコード (viewmodel 関数から) を見ると、リストの最後のテキスト ボックスの内容をチェックしてから、別のテキスト ボックスを追加できるようになっていることがわかります。

// Add and remove
self.addWebsite = function() {

    var length = self.website().length;
    if (self.website()[length - 1].name == '') {
        // Last site in list has no name, don't allow them to add another
        return false;
    }

    self.website.push(new dashboardApp.website());
}

実行時にバインディングを変更する方法はありますか?そのため、次のような空白行をさらに作成するのではなく、入力する必要があることをユーザーにプロンプ​​トとして最後の項目にフォーカスを与えることができます。

self.website()[length - 1].name.hasfocus = true;
4

1 に答える 1

2

hasfocusこれは、単にではなく、observableを使用してバインドすることで実現できますhasfocus: true。

私がこのようなことをするのが好きな1つの方法focusedは、フィールドのメインオブザーバブルからサブオブザーバブルを追加することです。何かのようなもの：

var Site = function(name, url) {
    this.name = ko.observable(name);
    this.name.focused = ko.observable(true);

    this.url = ko.observable(name);
};

次に、のようにバインドdata-bind="value: name, hasfocus: name.focused"し、チェックでフォーカスされたオブザーバブルを設定して、のように名前が空になっていることを確認しますname.focused(true)。

サンプルは次のとおりです：http：//jsfiddle.net/rniemeyer/NkYR5/

nameとがオブザーバブルでない場合urlは、フォーカスを制御するために特別に別のオブザーバブルを追加することができます。

于 2012-08-05T00:30:14.173 に答える