8

mvc プロジェクトでブートストラップを使用しています。ブートストラップ ポップオーバー ウィジェットに問題があります。ポップオーバー ウィジェット用のカスタム ノックアウト バインディングを作成しました。コードは次のとおりです。

フィドルをチェック

 ko.bindingHandlers.popover = {
        init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valuesAccessor() || {});

            options.html = true;

            options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>';

            $(element).popover(options);
        },
        update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var extraOptions = allBindingsAccessor().popoverOptions;

            $(element).popover(extraOptions.observable() ? "show" : "hide");
            $(element).siblings('.popover').css({ width: '150px' });

            //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE

            //if(extraOptions.observable())
                //$(element).popover('show');
        }
    };

    function vm() {
        var self = this;

        self.isVisible = ko.observable(false);

        self.open = function () {
            self.isVisible(!self.isVisible());
        };
    }

    ko.applyBindings(new vm());

可変テキスト メッセージと可変サイズの要素でポップオーバーを初期化したいと考えています。すべてがうまくいきますが、ポップオーバーのデフォルトの幅を最初に開いたときよりも変更すると、その位置が正しくありません(フィドルで動作を確認してください)。

フィドルには、この問題よりもコメントを外すと解決するコード行がありました。しかし、私はそれがハッキーなアプローチだと感じています。

4

3 に答える 3

11

これが私が使用するサンプルの初期化です。

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

ご覧のとおり、カスタム テンプレートを使用しています。テンプレートは、カスタム popover-medium クラスを使用します。

それから私はCSSセレクターを持っています

.popover-medium {
    max-width: 350px;
}

必要に応じて、テンプレート クラスにスタイルを設定することもできます。

于 2014-01-26T11:12:19.167 に答える
2

デモ

これを試してください私はあなたのコードを編集しました

ko.bindingHandlers.popover = {
        init: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valuesAccessor() || {});



            options.html = true;

            options.content = '<small class="text-info">' + 'Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here.Variable text goes here. ' + '</small>';

            $(element).popover(options);


        },
        update: function (element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var extraOptions = allBindingsAccessor().popoverOptions;

            $(element).popover(extraOptions.observable() ? "show" : "hide");


            //IF YOU UN-COMMENT BELOW 2 LINES THAN EVERY THINGS WORKS FINE

            //if(extraOptions.observable())
                //$(element).popover('show');
        }
    };

    function vm() {
        var self = this;

        self.isVisible = ko.observable(false);

        self.open = function () {
            self.isVisible(!self.isVisible());
        };
    }

    ko.applyBindings(new vm());

このcssを追加するだけです

.popover {
    max-width: 150px;
    width: auto;
}

これが役に立てば幸いですありがとう

于 2013-08-19T18:04:38.543 に答える
0

ポップオーバーを初期化した後に幅を変更しています。計算されたポップオーバーの左上の位置はそのままですが、幅は狭くなります。これにより、高さが大きくなります。

ポップオーバーが初期化される前に幅が適用されるように、イベントの順序を変更する必要があります。

于 2013-08-19T17:58:09.197 に答える