2014-02-17 51 views
4

有沒有人知道一個寶石,可以讓我輕鬆地實現一個模式的行動,而不必在每個頁面上包含模式標記。使用twitter bootstrap模態作爲Rails 4中的視圖?

例如,我要爲我的控制器總是在一個模式中的一個「新」行動......

基本上,我很想能夠使動作爲模式,使得我可以去

def new 
    render layout: "modal" 
end 

當我渲染layout這裏我其實還是希望主應用程序佈局加載,但我也希望其他嵌入式佈局(而不必使用變量,使我的觀點裏的諧音),這將包裝所有的需要.modal,.modal-dialog.modal-contentd周圍的代碼IVS在我new.html.erb模板,當然會是這樣的

<div class="modal-header"> 
    <h4>Yay!</h4> 
</div> 
<div class="modal-body clearfix"> 
    <p>Seamless modals rock!</p> 
</div> 

到這一行動的任何鏈接是沒有什麼兩樣的,並且不需要添加data-toggle等,你可以也可以通過手動輸入url來訪問該動作,因爲當您的render layout: "modal"導軌還包含$('#myModal').modal('show')包裝在on.load函數或類似的東西,並且您的模式在頁面加載時被觸發。這可以使渦輪鏈接很好地工作。

這是一個非常具體的例子,但我認爲可能有類似的東西已經建立在那裏。我可能在這裏問得太多。

所有這些模式操作都在登錄未索引的內容中,所以我認爲這不會影響SEO。

UPDATE

因爲我已經決定,我想也不會真的很好從UX的角度工作,因爲越接近我得到了我的首選解決方案,更多的怪事出現了,如:

  • 如果我訪問該動作,模式會自動觸發,但當然沒有任何模態背後。點擊取消或關閉按鈕時會發生什麼?
  • 當我在模態中提交我的表單並將其發回到同一個動作時,確定它很好地顯示了所有錯誤,而不必編寫javascript,但與此同時整個模態消失並重新出現。

其中的一些可以通過使用turbolinks並添加額外的選項,如重定向和背景意見一大堆固定的,而是它可能會需要更多的時間來擺弄超過時間將節省添加新的情態動詞。

+2

如果你想使嵌入到另一個佈局這個everyime該佈局呈現,所有你需要做的就是調用render到你的layot嵌入到主佈局中。我認爲這就是你想要的。 –

+0

嗨@ITNinja感謝您的評論 - 雖然我不確定我明白你的意思?你能提供一個簡單的代碼示例嗎? – Cameron

回答

4

你感到困惑與情態動詞是如何工作的:


情態動詞

情態動詞只不過是DIV元素的詳細頁面(與CSS/JS上,以便在出現徘徊「在「其他內容)

Bootstrap與否,它們仍然只是一個元素,必須像其他所有東西一樣渲染成佈局。所不同的是,你需要給他們打電話與CSS & JS,使它們看起來浮


代碼

如果你想顯示在模式的new行動,這樣做:

  1. 發送一個遠程(AJAX)請求新的行動(從你的鏈接)
  2. 處理Ajax請求,而不佈局
  3. 在原來的Ajax請求,渲染一個模式元素

這裏返回的數據:

#app/views/your/action.html.erb 
<%= link_to "New", new_modal_path, id: "modal_path" %> 

#app/views/your/new.html.erb 
<div id="myModal"> 
    <div class="modal-header"> 
     <h4>Yay!</h4> 
    </div> 
    <div class="modal-body clearfix"> 
     <p>Seamless modals rock!</p> 
    </div> 
</div> 

#app/controllers/your_controller.rb 
def new 
    respond_to do |format| 
     format.html { render layout: !request.xhr? } #renders naked html if ajax 
    end 
end 

#app/assets/javascripts/application.js.erb 
$("#modal_path").on("click", function() { 
    $.ajax({ 
     url: $(this).attr("href"); 
     success: function(data) { 
      $(data).appendTo("body"); 
      $('#myModal').modal('show'); 
     } 
    }); 
}); 

Good reference here

+0

感謝Rich,您的解決方案基本上是我已經工作的。我確切地知道模態是什麼以及它們是如何工作的。你不明白我的問題,這是我的錯,因爲我說得不夠好。我稍微修改了我的問題並添加了更新。 – Cameron

相關問題