有没有人有一个例子,让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演示中使用.)