今日は朝からミーティングしつつ、社内ツールの機能改善・機能追加をやってた。
すると意外なところにバグがあったりを見つけて、難しいなと。

今日のやったこと、できたこと

  • 社内ミーティング
  • プログラミング
  • Rspecのコード書く

明日への課題

  • 社内ミーティング
  • 打ち合わせ
  • PG設計
  • プログラミング

今日のワーク

今日は意外なところで既存バグが見つかった。
いや、すげー単純なところなんだけど。

index = q.object ? @product.contents.index(q.object) : '__nested_field_for_replace_with_index__'

って計算式で算出してるネストフィールド用の引数なんだけど、新しく追加したフィールドに対してnilが入ってくる。
すると、画像の出力のところで、

@hoge.contents[index.to_i].image

やってるところがあって、ここで「index.to_i」が「0」になっちゃう。
てっきり追加分は追加分の引数が入ってくるのかと思ってたのに違うみたいで、さらに「to_i」で「0」に変換されたもんだから予想と全然違うものが表示されてた。なので、

@hoge.contents[index.to_i].image.present? and index.present?

で両方の存在確認するように変更した。
ざるにしたつもりなかったんだけど、知らんとすり抜けてしまうし、テストもしてなかった。

それと、やっぱりここもネストフィールドなんだけど、ネストしてる項目にテキスト項目があって、そこにwysiwygのsummernoteを適用させたかった。
で、当然ながらすでに画面開設時に表示されてるフォームには問題なく適用されるんだけど、動的に追加したフォームに適用されない。

というわけで、こんなスクロプトを書いたところうまく動的に追加した項目にも適用されました。

 var mo = new MutationObserver(function(mutations) {
　$.each(mutations, function(i, mutation) {
　　var target = $(mutation.target);
　　$('[data-provider="summernote"]:last-child').summernote({
　　　lang: 'ja-JP',
　　　height: 300,
　　　toolbar: [
　　　　['style', ['bold', 'italic', 'underline', 'clear']],
　　　　['fontsize', ['fontsize']],
　　　],
　　　fontSize: [ '9', '10', '11', '12', '14', '18', '24', '36' ],
　　});
　　$(".dropdown-toggle").dropdown();
　});
});
$.each($('#nested_fields').get(), function(index, elem) {
　mo.observe(elem, {childList: true});
});

MutationObserverでオブジェクトの子要素を監視して、要素が変化したら関数を実行してくれるみたいです。
で、さらに追加された要素は常に最後に追加されるので、「[data-provider=”summernote”]:last-child」で最終要素を決め打ちして適用させてます。

これで問題なく動いてます。
他のサイトで「onReady」って記載があったんだけど、これはダメだった。古い情報だったのかな？

そんな感じでここもなんとかクリアできて、説明文にHTMLを記載しやすくなった。
今回は説明文にテーブルタグを書きたかったので、どうしても必要だったんだよね。

あとは、テーブルとメンテナンスするWPのテーブルを追加しようと思ったんだけど、思ったよりも複雑で開発終わらなかった。
あんまり難しくしすぎちゃダメだね。考え直そう。

そんな感じ。