6

KnockoutJS で「条件付きクリック」バインディングを作成したいと思います。基本的に、これは Knockout で使用するような標準のクリック バインディングですが、添付された機能を実行するには条件を満たす必要があります。私の場合、最適なオプションは、許可されている場合は標準のクリック バインディングを呼び出すカスタム バインディング ハンドラを作成することです。

ko.bindingHandlers.safeClick = {
    'init': function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).click(function() {
            if(mycondition == true) {
                // call the standard click binding here -> this is the part I don't know
            }
        });
    }
}

標準のクリック バインディングをすべてこのカスタム バインディングに置き換えたいと考えています。したがって、HTML で提供されるすべてのパラメーターが関数に渡されるように、正しい方法でクリック バインディングを呼び出すことが重要です。例えば：

<a href="#" data-bind="click: basevm.gotopage.bind($data, '#homepage')">Home</a>
<a href="#" data-bind="click: itemvm.activateItem">Activate</a>

これらを置き換える必要があります

<a href="#" data-bind="safeClick: basevm.gotopage.bind($data, '#homepage')">Home</a>
<a href="#" data-bind="safeClick: itemvm.activateItem">Activate</a>

カスタムバインディングの足りない部分を教えていただけると助かります。

4

2 に答える 2

13

ここでクリック入札を委任する正しい方法は次のとおりです。

  • 元の関数を使用します（例：を使用valueAccessor()）
  • 元の関数を呼び出す条件を含む新しい関数を返す新しい valueaccessor 関数を作成します。そして、この新しい valueaccessor をclickバインディングに渡します。

したがって、あなたは次のsafeClickようになります。 

ko.bindingHandlers.safeClick = {
    'init': function (element, valueAccessor, allBindingsAccessor, 
                      viewModel, bindingContext) {
        var originalFunction = valueAccessor();
        var newValueAccesssor = function() {
            return function () {
                if (mycondition == true)
                    //pass through the arguments
                    originalFunction.apply(viewModel, arguments);
            }
        }
        ko.bindingHandlers.click.init(element, newValueAccesssor, 
            allBindingsAccessor, viewModel, bindingContext);
    }
}

JSFiddleのデモ。

これは最初のクリックで機能し、クリック イベントを手動でサブスクライブしたり、jQuery でトリガーしたりする必要はありません。

于 2013-08-09T08:54:59.507 に答える
1

次のように呼び出すことができます。

ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context);

編集: 初めてクリックイベントを手動で呼び出すことができます:

ko.bindingHandlers.safeClick = {
    'init': function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).click(function() {
            if(mycondition == true) {
                ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context);
            }
        });
        if(mycondition == true) {
             $(element).trigger('click');
        }
    }
}
于 2013-08-09T08:07:43.653 に答える