有没有人有一个例子,让SammyJS json商店演示的产品细节显示在像
FancyBox这样的模态插件中？
这是json商店的代码块 – 我需要做什么才能在模型FancyBox中展示它？
this.get('#/item/:id',function(context) {
this.item = this.items[this.params['id']];
if (!this.item) { return this.notFound(); }
this.partial('templates/item_detail.template');
});
解决方法
您可能想要使用Sammy的
RenderContext render()方法：
this.get('#/item/:id',function(context) {
this.item = this.items[this.params['id']];
if (!this.item) { return this.notFound(); }
this.render('templates/item_detail.template').then(function(content) {
$.fancybox({
content: content,// set Box size to fit the product details
autoDimensions: false,width: 800,height: 500
});
});
});
编辑
正如@drozzy所指出的,位置栏仍会随着这种方法而改变.要解决此问题,我们需要拦截应该打开弹出窗口并明确启动Sammy路径的链接上的点击：
$(document).delegate("a[href^=#/item/]","click",function(linkElement) {
// Determine and explicitly start Sammy's route for the clicked link
var path = linkElement.currentTarget.href.replace(/^[^#]*/,"");
Sammy('#main').runRoute('get',path);
// cancel the default behavIoUr
return false;
});
请注意,此示例使用选择器匹配带有以#/ item /开头的路径的链接.如果这不够具体,那么应该更合适一些,例如：标记类.
(这使用jQuery 1.4.3,在JSON Store演示中使用.)
