أفضل الممارسات لاستخدام AJAX بدون مساعدات Rails المضمنة؟

Question

في تطبيق مدونتي، تظهر بعض المنشورات كمقتطفات - أي أن المستخدم يرى أول 500 حرف (على سبيل المثال)، ويمكنه النقر فوق رابط لعرض المنشور بأكمله.هنا هو الجزئية ذات الصلة:

<% href = url_for post_path(:id => post) %>

<h1 class="title"><%= post.title %></h1>
<h2 class="published_on"><%= post.author %> wrote this <%= time_ago_in_words(post.published_on)%> ago</h2>
<div class="body">
  <% if defined?(length) %>
    <%= truncate_html(post.body, :length => length, :omission => "&hellip;<h1><a class='more' href=\"#{href}\">Click here for more!</a></h1>") %>
  <% else %>
    <%= post.body %>
  <% end %>
</div>

ومع ذلك ، بدلاً من "انقر هنا للمزيد!" أخذ المستخدم إلى صفحة منفصلة ، أود أن يملأ بقية المنشور المضمّن.حاليًا، أقوم بتنفيذ ذلك عن طريق وضع المقتطف أعلاه في القسم التالي:

<div class="post" id="post_<%= post.id %>">
  <%= render :partial => 'post_content', :locals => { :post => post, :length => 500 } %>
</div>

ثم أستخدم معرف div هذا في application.js الخاص بي للقيام بـ AJAX:

$(document).ready(function() {

  $("a.more").click(function() {
    var url = $(this).attr('href');
    var id = url.split("/")[2]
    $.get(url, null, function(data) {
      $("#post_" + id).html(data);     
    });
    return false;
  });

});

من الواضح أن هذا أمر مثير للاشمئزاز - لا أريد أن يعتمد جافا سكريبت الخاص بي على موقع معرف المنشور في href الرابط، لكنني لا أعرف أي طريقة أخرى لجافا سكريبت لمعرفة المنشور الذي سيتم إرساله وبالتالي إلى أي منشور div يجب إدراج المحتوى.

ما هي أفضل طريقة لتحقيق ذلك؟هل يجب أن أعود إلى استخدام مساعدي AJAX الخاصين بـ Rails؟

Answer 1

هوراس، أنت على حق.لا تحتاج إلى مساعدي Rails على الإطلاق.لتحقيق نيرفانا جافا سكريبت غير المزعجة، من الأفضل أن تتجنبها (عذرًا مارك!)

تعني لغة JS غير المزعجة تجنب لغة JS المضمنة حيثما أمكن ذلك.في الواقع، حاول إبقاء الأشياء مترابطة بشكل غير محكم، ولكن ليس منفصلة تمامًا.في المثال الذي قدمته لنا، الأمر سهل، لأن لدينا عنوان URL من HREF للعمل معه.لا يحتاج JS الخاص بك إلى "معرفة" أي شيء حول كيفية الطلب.

إليك كيفية الإرسال عبر الرابط من HREF بشكل أعمى، وجعل Rails يستجيب باستجابة ajax (على سبيل المثال:لا تخطيط).

حل:

<!------- Your HTML ------>
<h1 class="title">Schwein Flu Strikes Again</h1>
<h2 class="published_on">B.Obama wrote this 2 seconds ago</h2>
<div class="body">
    SUMMARY SUMMARY
    <h1><a class='more' href="/post/1234">Click here for more!</a></h1>
</div>

/********* Your JavaScript ***********/
$(document).ready(function() {


$ ("A.More"). انقر فوق (function () {$ contining_div = $ (e) .parents ('div.body') ؛فار url = $(this).attr('href');$ .ajax ({Be ForsEnd:وظيفة(طلب) { request.setRequestHeader("Accept", "text/javascript");} ، / * المدرجة حتى يستجيب القضبان عبر "format.js" * / النجاح:وظيفة(استجابة) { $(containing_div).empty.append(response);}، يكتب :'Get' ، url:url}) ؛عودة كاذبة؛});

});

########### Your Controller ###########
def show
  @article = Post.find(param[:id])
  respond_to do |format|
    format.html { render :action => "show" and return  }
    format.js { render :partial => "post_content", :layout => false and return }
  end
end

يفترض هذا أيضًا أن لديك مسارات RESTful أو مسارات مشابهة للتعامل مع /post/:id

وانتهينا!وأعتقد أن هناك شيئا في ذلك بالنسبة لنا جميعا.:د

Answer 2

في هذه الحالة، لا أعتقد أنه يجب عليك إجراء مكالمة AJAX على الإطلاق.لديك بالفعل محتوى المنشور الأصلي بالكامل في post.body (لم تقم بجلب 500 حرف فقط من قاعدة البيانات) بدلاً من استخدام JQuery لإجراء مكالمة ajax، استخدمه لإخفاء المحتوى الذي يتجاوز 500 حرف ثم عندما يقوم المستخدم ينقر على الرابط "المزيد" ويعرض بقية القسم.يمكنك القيام بذلك بالكامل من جانب العميل وحفظ ملف ajax على نفسك.

في جزئيتك:

<div class="body">
  <%= post.body %>
</div>

مسج الخاص بك:

var fullText = $('div.body').html();
$('div.body').html(fullText.slice(0,499) + '<a class="more" href=\"#\">Click here for more!</a>');
$('a.more').live('click', function(event) {
  this.parent().html(fullText);
  return false;
}

Answer 3

في رأيي، بالنسبة لهذا النوع من المشاكل، يجب عليك استخدام مساعدي Rails.

HTML سيكون مثل:

My post bla bla bla <span id="more_of<%=post.id%>">more</span>

الرابط الأكثر سيكون:

<%= link_to_remote( "more",:update => "more_of_#{your_post.id}",:url =>{:controller => "myposts", :action=>"show_more", :id => your_post.id}, %>

وسوف تفعل وحدة التحكم شيئًا مثل:

post = Post.find_by_id(params[:id])
render :text => post.content.slice(100..post.content.size) 

الطريقة الأخرى التي يمكن أن تكون بنفس الجودة هي تحميل كل شيء ثم إخفائه:

bla bla bla this is my post blah <div style="display:none" onclick="this.style.display='block';">and this is the rest of the article</div>

(قد يؤدي النقر فوق علامة div إلى انقطاع IE ولكن هذا لإعطائك الفكرة)

بالنسبة لي، ستكون هذه هي أفضل طريقة للذهاب ما لم يكن لديك سبب وجيه لتجنب مساعدي Rails.

امل ان يساعد