0

目標

$.ajaxjQuery から関数の成功時にスクリプト (具体的には qTip2 スクリプト) を呼び出します。

問題

KnockoutJS で動作する次のスクリプトがあります。

$.ajax({
    url: "/ProductsSummary/List?output=json",
    dataType: "json",
    success: function (data) {
        var mappingOptions = {
            create: function (options) {
                return (new (function () {
                    this.finalMeasure = ko.computed(function () {
                        return this.quantity() > 1 ? this.measure() + "s"
                        : this.measure();
                    }, this);

                    this.infoComposition = ko.computed(function () {
                        return this.quantity() + ' ' + this.finalMeasure();
                    }, this);

                    ko.mapping.fromJS(options.data, {}, this);
                })());
            }
        };

        ViewModel.Summary.products = ko.mapping.fromJS(data, mappingOptions);
        ko.applyBindings(ViewModel);

        $("ul.products-list li").each(function () {
            var $productId = $(this).data("productid"),
                $match = $(".summary")
                         .find("li[data-productid=" + $productId + "]")
                             .length > 0;

            if ($match) {
                $(this).find("button.action").addClass("remove");
            } else {
                $(this).find("button.action").addClass("add");
            }
        });
    }
});

次のフラグメントでは、クラスをボタンに設定してそのスタイルを定義していますが、新しいツールチップをレンダリングするために qTip2 を再度呼び出す必要があるため、うまくいきません。見る:

$("ul.products-list li").each(function () {
    var $productId = $(this).data("productid"),
        $match = $(".summary")
                 .find("li[data-productid=" + $productId + "]")
                     .length > 0;

    if ($match) {
        $(this).find("button.action").addClass("remove");
    } else {
        $(this).find("button.action").addClass("add");
    }
});

物事を機能させるには、このフラグメントの後に qTip2 スクリプトを呼び出す必要がありますが、以前に呼び出されていました。

冗長にならないように、またはDRY の概念を実践するには、「成功時」の内部で qTip2 スクリプトを再度呼び出すにはどうすればよいですか?

少しのコード

私のqTip2スクリプト:

$(function () {
        var targets = $("ul.products-list li .controls
                      button.action.add").attr('oldtitle', function () {
            var title = $(this).attr('title');
            return $(this).removeAttr('title'), title;
        }),

            shared_config = {
                content: {
                    text: function (event, api) {
                        return $(event.currentTarget).attr('oldtitle');
                    }
                },
                position: {
                    viewport: $(window),
                    my: "bottom center",
                    at: "top center",
                    target: "event"
                },
                show: {
                    target: targets
                },
                hide: {
                    target: targets
                },
                style: "qtip-vincae qtip-vincae-green"
            };

        $('<div/>').qtip(shared_config);

        $('<div/>').qtip($.extend(true, shared_config, {
            content: {
                text: function (event, api) {
                    var target = $(event.currentTarget),
                        content = target.data("tooltipcontent");

                    if (!content) {
                        content = target.next("div:hidden");
                        content && target.data("tooltipcontent", content);
                    }

                    return content || false;
                }
            },
            position: {
                my: "top center",
                at: "bottom center",
                viewport: $(".content"),
                container: $(".content")
            },
            show: {
                event: "click",
                effect: function () {
                    $(this).show(0, function () {
                        $(this).find("input[name=productQuantity]").focus();
                    });
                }
            },
            hide: {
                event: "click unfocus",
                fixed: false
            },
            events: {
                hide: function (event, api) {
                    $($(this).find("input[type=text].quantity")).val("");
                    $($(this).find("button")).prop("disabled", true);
                }
            },
            style: "qtip-vincae qtip-vincae-grey"
        }));
    });

前もって感謝します。

4

1 に答える 1