SammyJS json商店演示 - 如何創建模態產品彈出？

有沒有人有一個例子使SammyJS json商店演示的產品詳細信息以模式插件的形式出現，如FancyBox？SammyJS json商店演示 - 如何創建模態產品彈出？

下面是json商店的代碼塊 - 我需要做什麼才能將其呈現在模型中FancyBox？

2011-03-19 Steve

我已經得到了同樣的問題：http://stackoverflow.com/questions/8827136/modal-dialog-in- sammy-js但我認爲你的問題更具體。實際上，我會爲此付出代價。 – drozzy 2012-01-12 17:45:51

你可能想使用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演示使用。）

來源

2012-01-18 14:44:00

難道這只是將'content'作爲一個字符串？我很確定你不需要單引號，所以你可以插入'render'方法返回的完整HTML。 – 2012-01-18 14:51:31

謝謝@ leo.vingi，我在我的答案中解決了錯誤。 – 2012-01-18 14:57:54

有趣的解決方案！但是，這不會將URL更改爲「/ item/blah」 - 然後保持它即使用戶關閉模式窗口？很高興能有類似amazon爲他們的書預覽做的事情（你可以在這本書中滾動 - 而url不會改變） – drozzy 2012-01-18 16:35:35

從該模板文件中的代碼如下：

<div class="item-detail"> 
    <div class="item-image"><img src="<%= item.large_image %>" alt="<%= item.title %>" /></div> 
    <div class="item-info"> 
     <div class="item-artist"><%= item.artist %></div> 
     <div class="item-title"><%= item.title %></div> 
     <div class="item-price">$<%= item.price %></div> 
     <div class="item-link"><a href="<%= item.url %>">Buy this item on Amazon</a></div> 
     <div class="back-link"><a href="#/">&laquo; Back to Items</a></div> 
    </div> 
</div>

所以，你可以在目標div.item鏈接的鏈接，打開它的href在這樣的fancybox：

var $link = $('div.item-link a'); 
$link.fancybox({href:$link.attr('href')});

這應該夠了吧。

來源

2012-01-16 23:40:09 Scottux

SammyJS json商店演示 - 如何創建模態產品彈出？

回答

相關問題