0

環境：

モデル 1 とモデル 2 の 2 つのモデルがあります。Model1 has_many の model2 です。model1 の管理ページで、model1 に関連付けられた各 model2 に 1 つずつ、_model2.html.erb ファイルのリストをレンダリングします。ユーザーが model1 の管理ページから新しい model2 を作成できるようにするために、model2 のビュー ディレクトリの下に create.js.erb ファイルを作成しました。現在、ファイルは次のようになっています。

$('#back').hide();
$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
$('html,body').animate({
    scrollTop: $('html,body').scrollHeight
}, {
    duration: 600,
    queue: false
});
$('#activeTabList').closest('.number_of_model2s').text("<%= @model1.model2s.count %>");
$('#activeTabList').append("<li><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");
$('#activeTabList').last().children().effect('highlight', {}, 3000);

問題：

@model1部分的な作業のレンダリングを行うには、model2 コントローラーの create メソッドで の定義を作成する必要がありました。しかし、アニメーションや強調表示をまったく取得できません。このリストは長くなる可能性があるため、ページの一番下までスクロールする必要があります。リストへの追加をユーザーに見てもらいたい。強調表示はそれほど重要ではありませんが、同様の方法で動作する更新アクションもあり、更新される部分を強調表示したいので、それを機能させようとしています (更新された部分を削除します)。そこで、同じ場所で同じ model2 のパーシャルを再度リクエストします)。

質問：

実行されるように見える唯一のコード行が render 部分行である特定の理由はありますか?

詳しくは：

上記の部分的なレンダリング行を次のように置き換えても、部分的なものはレンダリングされません

$('#activeTabList').append("<li id='model2_<%= @model2.id %>'><%= escape_javascript(render partial: 'model2s/model2', locals: {f: @model2, g: @model1}) %></li>");

管理ページの html では、このようにリスト アイテムの ID を指定しますが、ここに ID を追加するとパーシャルがレンダリングされません。これは私が抱えている問題に関連しているようですか?

4

2 に答える 2

0

これで問題は解決しないかもしれませんが、そのアニメーションにはいくつかのエラーがあります。これを使って：

$('body').animate({
    scrollTop: $('body')[0].scrollHeight
}, {
    duration: 600,
    queue: false
});
于 2013-04-10T06:46:43.700 に答える
0

やっとスクロールできました。@gg_s、あなたの答えは私のアニメーションスクロールメソッドの構文に役立ちました。その後、mozilla で動作するように修正する必要がありました。これが私のために働いたものです：

var $new_campaign_li = $('#activeTabList').children('li').last();
$(jQuery.browser.webkit ? 'body': 'html').animate({
    scrollTop: $new_model2_li.offset().top + $new_model2_li.children().height() / 2 - $(window).height() / 2
}, {
    duration: 600,
    queue: true
});// This delay doesn't seem to work: .delay(1000);
$new_model2_li.children().effect('highlight', {color: '#71EC5E'}, 1500);

ハイライト効果は、トラバースのばかげたミスで修正されました。しかし、 がまたはにqueue設定されていることに気付きました。を使用しても、これら 2 つのアニメーションは同時に実行されます。それは私が望むように動作します！ありがとう！truefalsedelay(1000)

于 2013-04-10T06:52:16.673 に答える