1

クリックするとテキストボックスに変わるアンカーを表示するカスタムバインディングを作成しています。ユーザーが値を入力してEnterキーを押すと、その値はバインディングに渡されるobservableArrayにプッシュされます。

バインディングの大部分は、RyanNiemeyersの例から取得されました-ここにあります

html

<div data-bind="clickToEdit: { data: items, buttonText: 'New Item' }"></div>

バインディング

ko.bindingHandlers.clickToEdit = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var options = valueAccessor() || {};

        var editing = ko.observable(false);
        var newValue = ko.observable();

        var button = $('<a class="btn btn-mini" href="#">' + options.buttonText + '</a>').prepend('<span class="icon-plus"></span>').appendTo(element)[0];
        var input = $('<input type="text">').appendTo(element)[0];

        ko.applyBindingsToNode(button, {
            hidden: editing,
            click: function () {
                editing(true);
            }
        });

        ko.applyBindingsToNode(input, {
            value: newValue,
            visible: editing,
            hasFocus: editing,
            //valueUpdate: 'afterkeydown',
            onEnter: function(data) {
                debugger;
                options.data.push(data);
                editing(false);
            }
        });
    }
};

問題は、onEnterバインディングにバインドされている関数では、データパラメータが常に未定義であるため、新しい値が配列にプッシュされないことです。

完全な例については、私のフィドルを参照してください

4

1 に答える 1

1

役立つ2つのこと：

  • applyBindingsToNode呼び出しは、コンテキストを提供できる3番目の引数を受け入れます。私のサンプルのいくつかでは、それがオブザーバブルに直接書き込んでいて、データを必要としなかったので、コンテキストは無関係でした。したがって、2番目の呼び出しの3番目の引数としてcontext（または）を渡すことができます。viewModelapplyBindingsToNode

  • あなたがやろうとしていることを私が理解していれば、あなたは次のようなことをすることができると思います： options.data.push(new Item(newValue());そしてあなたがトップレベルにいるので、コンテキスト/データ（これは全体的なビューモデルになるでしょう）について心配する必要はありません範囲）。

例： http： //jsfiddle.net/rniemeyer/Pmns4/

于 2013-03-22T14:00:30.433 に答える