10

Knockout.js は初めてです。

それが見えるようになったときの最善の方法は何ですか?select()<input />

意見：

<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasfocus: editing" />
</p>

ビューモデル:

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);

    // Behaviors
    this.edit = function() { this.editing(true) }
}

ko.applyBindings(new PersonViewModel("Bert Bertington"));

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

http://jsfiddle.net/RnCUd/

ありがとう！

4

2 に答える 2

20

選択を処理する新しいバインディングを作成できます。

ko.bindingHandlers.selected = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected) element.select();
    }
};

このバインディングを入力フィールドに追加します。

<input data-bind="visible: editing, value: name, hasfocus: editing, selected: editing" />

ここにフィドルがあります：http://jsfiddle.net/RnCUd/2/

または、バインディングをラップするカスタム バインディングを作成することもできますhasfocus。

ko.bindingHandlers.hasSelectedFocus = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers['hasfocus'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    },        
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers['hasfocus'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);        

        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected) element.select();
    }
};

このバインディングは単に初期化と更新を委譲しhasfocus、オブザーバブルが true の場合は要素の選択を処理します。の代わりに使用してくださいhasfocus。

<input data-bind="visible: editing, value: name, hasSelectedFocus: editing" />

ここにフィドルがあります：http://jsfiddle.net/RnCUd/1/

于 2012-09-06T10:05:03.063 に答える