目標
$.ajax
jQuery から関数の成功時にスクリプト (具体的には 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"
}));
});
前もって感謝します。