5

テキスト入力フィールドに透かしの動作を与えるために使用できるカスタム bindingHandler を作成しようとしています。

watermarkつまり、フォーカス時に削除され、テキストフィールドがまだ空の場合はぼかし時に置き換えられるデフォルト値をテキストフィールドに追加します

このjsfiddleで示されているように、これを機能させることができました：http://jsfiddle.net/rpallas/nvxuw/

このソリューションについて 3 つの質問があります。

  1. 透かし値を一度だけ宣言する必要があるように変更する方法はありますか? 現在、バインディングを宣言する場所に配置する必要があり、viewModel で同じ値を使用してオブザーバブルを初期化する必要があります。それ以外の場合は初期値がないためです。
  2. 要素の値がバインドされている基になるオブザーバブルに到達するより良い方法はありますか? 私は現在 allBindingsAccessor を使用してそれを取得していますが、これは私には間違っていると感じています。もともとjqueryを使って値を設定していたのです$(element).val('')が、これも違和感がありました。どちらが最適ですか、またはより良い方法はありますか?
  3. この問題に対する既存の解​​決策を持っている、または知っている人はいますか? 私は車輪を再発明していますか？
4

2 に答える 2

14

allbindings の使用は不要だと思います。placeholder実際、透かしは一般的に透かしが行うこと、つまり属性であるため、透かしが観察可能なものを認識する必要はまったくないと思います。

これはうまくいきますか？

ko.bindingHandlers.watermark = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var defaultWatermark = ko.utils.unwrapObservable(value);
        var $element = $(element);

        setTimeout(function() {
            $element.val(defaultWatermark);}, 0);

        $element.focus(
            function () {
                if ($element.val() === defaultWatermark) {
                    $element.val("");
                }
            }).blur(function () {
                if ($element.val() === '') {
                    $element.val(defaultWatermark)
                }
            });
    }
};

http://jsfiddle.net/madcapnmckay/Q5yME/1/

お役に立てれば。

于 2012-06-07T16:19:00.117 に答える
1

アプリのロジックが非常に単純である限り、前のアプローチは問題ありません。ソリューションがビュー モデルの値をいじっていることに注意してください。ビューモデルを変更します。ビューモデルを更新しない別のソリューションを次に示します

ko.bindingHandlers.fakePlaceHolderWhenNeedIt = {
    init: function (element, valueAccessor, allBindings, vm) {
     if (!Modernizr.input.placeholder) {
        var placeHolderVal = $(element).attr("placeholder");

        if (placeHolderVal != null || placeHolderVal != '') {

            var $element = $(element);
            var value = valueAccessor()
            var valueUnwrapped = ko.utils.unwrapObservable(value);


            $element.keyup(function () {
                var inputValue = $(this).val();
                var $watermark = $(this).prev('.ie-placeholder');
                if (inputValue == null || inputValue == '') {
                    $watermark.show();
                }
                else {
                    $watermark.hide();
                }
            });

            var display = valueUnwrapped != null || valueUnwrapped != '' ? "block" : "none";
            var left = $element.position().left;
            var top = $element.position().top;
            var paddingLeft = $element.css('padding-left');
            var paddingRight = $element.css('padding-right');
            var paddingTop = $element.css('padding-top');
            var paddingBottom = $element.css('padding-bottom');

            var height = $element.css('height');
            var placeHolder = '<div class="ie-placeholder" style="position:absolute;left:' + left + ';top:' + top + ';padding-top: ' + paddingTop + ';padding-bottom: ' + paddingBottom + ';padding-left: ' + paddingLeft + ';padding-right: ' + paddingRight + ';height: ' + height + ';line-height:' + height + ';display:' + display + ';">' + placeHolderVal + '</div>';

            $(placeHolder).click(function () { $element.focus(); }).insertBefore(element);
        }
    }
},
update: function (element, valueAccessor, allBindings, vm) {
    if (!Modernizr.input.placeholder) {
        var placeHolderVal = $(element).attr("placeholder");

        if (placeHolderVal != null || placeHolderVal != '') {
            var $element = $(element);
            var value = valueAccessor()
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var $watermark = $element.prev('.ie-placeholder');
            if (valueUnwrapped == null || valueUnwrapped == '') {
                $watermark.show();
            }
            else {
                $watermark.hide();
            }
        }
    }
}
于 2013-04-11T19:37:59.217 に答える