Rails Ajax重繪html無法識別模型之間的關係

Question

因此，我通過我的ajax獲取響應後正在使用JavaScript重繪我的html，該響應工作正常。重繪時不顯示的唯一的事情就是書[I] .user.full_name
和輔助方法cutoff_text（「書[I] .author」）

它說，它是不確定的兩種。這是否意味着如果我的模型與另一個模型有關係，我無法重新繪製特定的HTML和輔助方法？我怎樣才能解決這個問題？

因爲書belong_to用戶

這是我的代碼：

$('#priceSelect').change(function(){ 
    $.ajax({ 
    url: "books", 
    type: "GET", 
    dataType: 'json', 
    data: { 
     sort: $('#priceSelect :selected').val(), 
     title: $('.title_information').data('title'), 
     university: $('.university_information').data('university') 
    }, 
    success: function(result){ 
     // result gives me an array of my book objects 
     var books = result; 
     var length = books.length; 
     var html = ""; 
     for (var i = 0; i < length; i++) { 
     . 
     . 
     . 
     html += "<h5 class='no-margin'>" + "<%= cutoff_text(" + books[i].author + ") %></h5>"; 
     html += "<h5 class='no-margin book-price-highlight'>" + books[i].price + "€</h5>"; 
     html += "<h5 class='no-margin'>By " + books[i].user.full_name + "</h5>"; 
     } 
     document.getElementById("book-id").innerHTML = html 
    }, 
    }) 
}); 

BooksController.rb指數

@title = params.dig("book", "title") 
@university = params.dig("users", "university") 

if (params.dig("book", "title") != "") && (params.dig("users", "university") != "") 
    @books = Book.where({title: params.dig("book", "title")}) 
    .joins(:user).where(users: {university: params.dig("users", "university")}) 
elsif (params.dig("book", "title") != "") && (params.dig("users", "university") == "") 
    @books = Book.where({title: params.dig("book", "title")}) 
elsif (params.dig("book", "title") == "") && (params.dig("users", "university") != "") 
    @books = Book.joins(:user).where(users: {university: params.dig("users", "university")}) 
else 
    @books = Book.all 
end 

case params[:sort] 
    when "Price Descending" 
    if (params[:title] != "") && (params[:university] != "") 
     @books = Book.where({title: params[:title]}) 
     .joins(:user).where(users: {university: params[:university]}).order(price_cents: "DESC") 
    elsif (params[:title] != "") && (params[:university] == "") 
     @books = Book.where({title: params[:title]}).order(price_cents: "DESC") 
    elsif (params[:title] == "") && (params[:university] != "") 
     @books = Book.joins(:user).where(users: {university: params[:university]}).order(price_cents: "DESC") 
    else 
     @books = Book.all.order(price_cents: "DESC") 
    end 
    when "Price Ascending" 
    if (params[:title] != "") && (params[:university] != "") 
     @books = Book.where({title: params[:title]}) 
     .joins(:user).where(users: {university: params[:university]}).order(price_cents: "ASC") 
    elsif (params[:title] != "") && (params[:university] == "") 
     @books = Book.where({title: params[:title]}).order(price_cents: "ASC") 
    elsif (params[:title] == "") && (params[:university] != "") 
     @books = Book.joins(:user).where(users: {university: params[:university]}).order(price_cents: "ASC") 
    else 
     @books = Book.all.order(price_cents: "ASC") 
    end 
    when "Best Results" 
    if (params[:title] != "") && (params[:university] != "") 
     @books = Book.where({title: params[:title]}) 
     .joins(:user).where(users: {university: params[:university]}).sort_by(&:created_at) 
    elsif (params[:title] != "") && (params[:university] == "") 
     @books = Book.where({title: params[:title]}).sort_by(&:created_at) 
    elsif (params[:title] == "") && (params[:university] != "") 
     @books = Book.joins(:user).where(users: {university: params[:university]}).sort_by(&:created_at) 
    else 
     @books = Book.all.sort_by(&:created_at) 
    end 
end 
respond_to do |format| 
    format.html 
    format.json { render json: @books } 
end 

而且我index.html.erb視圖

<%= content_tag :div, class: "title_information", data: {title: @title} do %> 
<% end %> 
<%= content_tag :div, class: "university_information", data: {university: @university} do %> 
<% end %> 

<select id="priceSelect"> 
    <option value="Best Results" selected="selected">Best Results</option> 
    <option value="Price Descending">Price Descending</option> 
    <option value="Price Ascending">Price Ascending</option> 
</select> 
. 
. 
. 
<div class="books-info" id="book-id"> 
    <% @books.each do |book| %> 
    <div class="col-xs-12 selectable-card"> 
     <%= link_to book_path(book.id) do %> 
     <h4 class="index-card-title no-margin"><%= book.title %></h4> 
     <h5 class="no-margin"><%= cutoff_text(book.author) %></h5> 
     <h5 class="no-margin">By <%= book.user.full_name %></h5> 
     <% end %> 
    </div> 
    <% end %> 
</div> 

在我的User.r B型：

def full_name 
    "#{self.first_name} #{self.last_name}" 
end 

，最後輔助方法：

module BooksHelper 
    def cutoff_text(string) 
    string.length > 121 ? string.first(120) + "..." : string 
    end 
end 

Answer 1

爲什麼？

因爲full_name是服務器端邏輯，並且您在接收數據後嘗試從客戶端JavaScript調用它 ，這不起作用。 你知道我的意思嗎？你可以打電話給控制器的動作可以說直接從JavaScript的 指數？無權利？。您必須使用ajax或html ，並且服務器將回複數據，然後您可以使用它。

什麼是解決方案？

返回json自身的full_name。像這樣

[{full_name: "first last", id: 22, title: "Math", author: "Molissa", field: "Chemistry", price_cents: 2600, publish_year: "2007-04-28", title:"Math", user_id:15}, {…}, {…}] 

怎麼辦？

BooksController.rb

def index 
    ... 
    ... 
    @books = @books.includes(:user) // eager loading user. So that to reduce queries 

    respond_to do |format| 
    format.html 
    format.json      // dont return @books directly.will handle it in jbuilder 
    end 

end 

創建index.json.jbuilder（在同一文件夾中的索引。html文件 提供）。粘貼下面的代碼。

json.array! @books, partial: 'books/book', as: :book 

創建_book.json.jbuilder（在同一文件夾中的index.html文件 存在）。把它下面的代碼。

json.id book.id 
json.title book.title 
json.author book.author 
json.field book.field 
json.price_cents book.price_cents 
json.publish_year book.publish_year 

json.user_id book.user_id 
json.user_fullname book.user.full_name   // here we are sending user's fullname. 

，最後改變你的JavaScript點點

現在使用可以獲取用戶的全名狀書[I] .user_fullname

$('#priceSelect').change(function(){ 
    $.ajax({ 
    url: "books", 
    type: "GET", 
    dataType: 'json', 
    data: { 
     sort: $('#priceSelect :selected').val(), 
     title: $('.title_information').data('title'), 
     university: $('.university_information').data('university') 
    }, 
    success: function(result){ 
     // result gives me an array of my book objects 
     var books = result; 
     var length = books.length; 
     var html = ""; 
     for (var i = 0; i < length; i++) { 
     . 
     . 
     . 
     html += "<h5 class='no-margin'>" + "<%= cutoff_text(" + books[i].author + ") %></h5>"; 
     html += "<h5 class='no-margin book-price-highlight'>" + books[i].price + "€</h5>"; 
     html += "<h5 class='no-margin'>By " + books[i].user_fullname + "</h5>"; // check this 
     } 
     document.getElementById("book-id").innerHTML = html 
    }, 
    }) 
}); 

Answer 2

這是否意味着我不能重繪特定的HTML和輔助方法，如果我的模型有一個關係到另一個模式？

不，這並不意味着。然而...

前端不知道您的後端關係。這意味着您必須在您的json中傳遞所有必需的數據。所以，你需要修改你的index方法（這已經不是很漂亮了）。