क्या किसी के पास FancyBox जैसे मोडल प्लगइन में सैमीजेएस जेसन स्टोर डेमो शो के उत्पाद विवरण दिखाने का उदाहरण है?

यहाँ json store से कोड का ब्लॉक है - इसे एक मॉडल 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');
});
7
phteven 20 मार्च 2011, 01:50
मुझे एक ही समस्या है: stackoverflow.com/questions /8827136/modal-dialog-in-sammy-js लेकिन मुझे लगता है कि आपका प्रश्न अधिक विशिष्ट है। वास्तव में, मैं इस पर एक इनाम रखूंगा।
 – 
Andriy Drozdyuk
12 जिंदा 2012, 21:45

2 जवाब

सबसे बढ़िया उत्तर

आप शायद सैमी की 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 द्वारा बताया गया है कि इस पद्धति से स्थान बार अभी भी बदलेगा। इस व्यवहार के आसपास काम करने के लिए हमें उस लिंक पर क्लिक को रोकना होगा जो पॉपअप को खोलना चाहिए और स्पष्ट रूप से सैमी के मार्ग को शुरू करना चाहिए:

$(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 स्टोर डेमो में उपयोग किया गया है।)

6
Julian D. 18 जिंदा 2012, 21:52
2
क्या यह केवल content को एक स्ट्रिंग के रूप में पास नहीं करेगा? मुझे पूरा यकीन है कि आपको इसके चारों ओर सिंगल कोट्स की आवश्यकता नहीं है, इसलिए आप render विधि द्वारा लौटाए गए पूर्ण HTML को सम्मिलित करेंगे।
 – 
leo.vingi
18 जिंदा 2012, 18:51
दिलचस्प समाधान! लेकिन क्या यह यूआरएल को "/ आइटम/ब्लाह" में नहीं बदलता है - और फिर इसे ऐसे ही रखें, भले ही उपयोगकर्ता मोडल विंडो बंद कर दे? अमेज़ॅन अपनी पुस्तक पूर्वावलोकन के लिए कुछ ऐसा करना अच्छा होगा (जहां आप पुस्तक के माध्यम से स्क्रॉल कर सकते हैं - और यूआरएल नहीं बदलता है)
 – 
Andriy Drozdyuk
18 जिंदा 2012, 20:35
@drozzy: वास्तव में, मैंने स्थान बार के बारे में नहीं सोचा था। चूंकि स्थान बार बदलते समय सैमी अपने मार्गों को ट्रिगर करता है, इसलिए किसी को डिफ़ॉल्ट व्यवहार को रोकना होगा और स्पष्ट रूप से मार्ग शुरू करना होगा। मैं इस मामले को शामिल करने के लिए अपना जवाब अपडेट करूंगा।
 – 
Julian D.
18 जिंदा 2012, 21:35
यार, यह अच्छा है! मुझे क्लिक का इंटरसेप्ट पसंद है, बहुत बुरा सैमी इसे मूल रूप से नहीं कर सकता ... क्या आप सैमी.जेएस का बहुत उपयोग करते हैं या क्या आपने इसे उत्तर के लिए समझ लिया है? इसके अलावा, मार्कर वर्ग क्या हैं?
 – 
Andriy Drozdyuk
19 जिंदा 2012, 00:01
+1 - मैं वास्तव में इस बक्षीस को छीनना चाहता था, लेकिन आपका जवाब बहुत अच्छा है। इसके पीछे अंक डालने के लिए धन्यवाद @drozzy।
 – 
one.beat.consumer
19 जिंदा 2012, 10:17

उस टेम्पलेट फ़ाइल का कोड इस तरह दिखता है:

<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>

तो आप इसके href को फैंक्सबॉक्स में खोलने के लिए div.item-link में लिंक को लक्षित कर सकते हैं जैसे:

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

यह ट्रिक काम आना चाहिए।

1
Scottux 17 जिंदा 2012, 03:40