Ruby On Rails在link_to中使用幫助器方法

Question

嗨，我是在一周前開始使用Ruby on Rails的，並且還很新，所以如果有人可以幫助我解決這個問題，我將不勝感激，這是我正在從事的個人項目，而不是學校作業。所以問題是我試圖從我的html頁面上的jcarousel中單擊一個動畫圖像，並使用下面列出的輔助方法在p標記中的一個單獨的div（id = content）中顯示其描述，但是它無法正常工作它總是顯示我數據庫中動畫的最新描述，任何人都可以幫忙嗎？

我的助手方法

module HomepageHelper
attr_accessor :info
def getDescription(des)
   @info = des
end
def setDescription()
   content_tag(:p, @info)
end
end

我的HTML頁面

 <!DOCTYPE html>
 <html>
<head>,
    <%= stylesheet_link_tag "application", media:"all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"%>
    <title>Anime Shuffle</title>
</head>
<body>
    <%= yield %>
    <div class="container">
        <div class="header">
            <h1>Anime Shuffle</h1>

                <ul id="navigator">
                <li><a href="home.html">Home</a></li>
                <li><a href="video.html">Videos</a></li>
                <li><a href="about.html">List</a></li>
                </ul>
        </div>

        <div class="ContentSearch">
            <ul id="search">

                <li><input type="text" name="query" value="Search"></input></a></li>
                <li><a href="home.html">Popular</a></li>
                <li><a href="videos.html">New</a></li>
                <li><a href="anime_list.html">Shuffle</a></li>

            </ul>

        </div>

        <div class='jcarousel'>

            <ul id='carousel_ul'>
                    <% @animes.each do |anime| %>
                        <li>
                            <%= link_to image_tag(anime.img_src,:data => {:description => anime.aname, :title => anime.aname}),'getDescription(anime.description)' %> 

                            <figcaption> 
                                <%= anime.aname %> 
                            </figcaption>

                        </li>

                    <% end %>


            </ul>
            <div id="left1" class="left"  data-jcarouselcontrol="true"><div class="arrow-left"> </div>  
            </div>
            <div id="right1"class="right" data-jcarouselcontrol="true"><div class="arrow-right"></div>
            </div>  
        </div>

        <div class="content">
                <div id="Rating">
                    <p>0.0</p>
                    <div id="episode-title">
                        <p>Episode List</p>
                    </div>
                    <div id= "episodes-list">
                        <li><p>Episode<p>1<p>-<p>Upload Date</p></p></p></li>
                    </div>

                </div>
                <div id ="info">
                    <p>Synposis</p>
                    <div id = "info-content">
                        <p><%= setDescription %></p>
                        <div id="tags">
                            <li><p>Tags: <p>something, somthing, something, something</p></p></li>
                        </div>
                    </div>

                </div>
                <div id="Review">
                    <p>Review</p>
                    <div id= "Review-content">
                        <p>Ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut?</p>
                    </div>
                </div>
                </div>
        </div>



    </div>
    <div class="footer">
        <div id='footer-container'>
            <p>Powered by Net</p>
        </div>
    <div>

</body>

javascript

var id = "";

setInterval(function() {

    var left1 = parseInt($('#carousel_ul').css('left'));

    if ($('#left1').is(":hover")) {
        $('#carousel_ul').css('left', left1+1.5);
        if(left1> 150)
        {
            $('#carousel_ul li:last').insertBefore($('#carousel_ul li:first'))
            $('#carousel_ul').css('left', 0);
        }
    }
     else if ($('#right1').is(":hover")) {
        $('#carousel_ul').css('left', left1-1.5);
        if(left1 < -150)
        {
            $('#carousel_ul li:first').insertAfter($('#carousel_ul li:last'))
            $('#carousel_ul').css('left', 0);
        }
    }
    },10);
    $(document).ready(function() {
       setInterval();
    });

Answer 1

問題在於@info是一個實例變量，因此在頁面加載時會創建一次。 現在，由於有一個循環來打印輪播，因此您反復調用'getDescription'方法，每次@info變量都覆蓋。 當您最終嘗試將其值與setDescription一起使用時，您當然會得到最后的描述。

這里的問題是，您在服務器時使用最后的描述生成一個“內容” div。 相反，您應該為每個動畫生成一個動畫（帶有循環，就像在輪播中一樣），並在單擊圖像時顯示正確的動畫。

沒有JavaScript代碼，很難為您提供更多幫助。

編輯

好的，經過一番評論之后，我可能知道您有點困惑。 這里的問題是您正在混合客戶端和服務器端代碼。 HomepageHelper是Rails的幫助器，因此代碼只存在於服務器端，您不能從javascript引用它，只能將其用於構建視圖。 因此，首先我們需要更新輪播中的link_to標記，以使te鏈接管理onclick事件：

link_to image_tag(anime.img_src,:data => {:description => anime.aname, :title => anime.aname}), '#',
    :onclick => 'setDetail("contentFor' + anime.id +  '")'

在哪里將onclick事件添加到輪播圖片，因此，如果單擊它們，您將調用javascript函數setDetail並傳遞“ contentForN”作為參數，其中N會根據動漫id有所不同。

下一步，讓我們實現這個新的javascript函數（假設您使用的是jQuery）：

var current = null;

var setDetail = function (divId) {
    if (current != null) {
        $("#"+current).css("visibility", "hidden");
        $("#"+current).css("height", 0);
    }
    $("#"+divId).css("visibility", "visible");
    $("#"+divId).css("height", auto);
}

最后，您必須為每個動畫打印一個“內容” div ：

<% @animes.each do |anime| %>
    <div id="contentFor<%= anime.id %>" class="content" style="visibility: hidden; height: 0">
            <div id="Rating">
                <p>0.0</p>
                <div id="episode-title">
                    <p>Episode List</p>
                </div>
                <div id= "episodes-list">
                    <li><p>Episode<p>1<p>-<p>Upload Date</p></p></p></li>
                </div>

            </div>
            <div id ="info">
                <p>Synposis</p>
                <div id = "info-content">
                    <p><%= anime.description %></p>
                    <div id="tags">
                        <li><p>Tags: <p>something, somthing, something, something</p></p></li>
                    </div>
                </div>

            </div>
            <div id="Review">
                <p>Review</p>
                <div id= "Review-content">
                    <p>Ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut?</p>
                </div>
            </div>
            </div>
    </div>
<% end %>

這應該可以工作，並且您不再需要幫助程序。 您應該將內聯css移動到標准css中。

Ruby On Rails在link_to中使用幫助器方法

問題描述

1 個解決方案

解決方案1
0 已采納 2014-10-31 12:03:52

Ruby On Rails在link_to中使用幫助器方法

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-31 12:03:52

解決方案1
0 已采納 2014-10-31 12:03:52