Rails 5を使ったアジャイルWeb開発 - アクションケーブル

Question

私はこの本の中のActionCableの例を取り上げています。すべてのコードが記述されているように追加され、私はActionCableサーバーログのヒットを見ることができますが、更新ページはアイテムのコストを更新することはありません。私は何が欠けていますか？

次のログエントリは、ActionCableが起動していることを示しています。コードは以下の通りです。あなたはあなたが投稿したコードのクラスstoreを持つ要素を持っていないので、（.store #mainを）存在していないよう要素にアクセスしようとしているあなたのreceived機能で

Product Load (0.1ms) SELECT "products".* FROM "products" 
    Rendered store/index.html.erb (6.0ms) 
[ActionCable] Broadcasting to products: {:html=>"<p id=\"notice\"></p>\n\n<h1>Your Pragmatic Catalog</h1>\n\n\n\n  <div class=\"entry\">\n\n  <img src=\"/assets/dcbang-28758120ca6616f3f95a4b73dda112a1f8e6ac3175e35b67e78d0ab0bd177566.jpg\" alt=\"Dcbang\" />\n  <h3>Rails, Angular, Postgres, and Bootstrap</h3>\n\n  <p>\r\n  <em>Powerful, Effective, and Efficient Full-Stack Web Development</em>\r\n  As a Rails developer, you care about user experience and performance,\r\n  but you also want simple and maintainable code. Achieve all that by\r\n  embracing the full stack of web development, from styling with\r\n  Bootstrap, building an interactive user interface with AngularJS, to\r\n  storing data quickly and reliably in PostgreSQL. Take a holistic view of\r\n  full-stack development to create usable, high-performing applications,\r\n  and learn to use these technologies effectively in a Ruby on Rails\r\n  environment.\r\n  </p>\n\n  <div class=\"price_line\">\n  <span class=\"price\">$80.00</span>\n\n   <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=2\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"FCedsTsN/GG6cm0VhcmY7SdGjpRzCKuuSyxKJt/Kak1Xdv/gUFVU1UYXr8n7nm2cKgvjwS23zcBorzf5P5lieg==\" /></form>\n\n  </div>\n\n  </div>\n\n\n  <div class=\"entry\">\n\n  <img src=\"/assets/7apps-f67c3d908f537bac34a290206cc1db4c6f4611196c550e49ba836b796a2602bb.jpg\" alt=\"7apps\" />\n  <h3>Seven Mobile Apps in Seven Weeks</h3>\n\n  <p>\r\n  <em>Native Apps, Multiple Platforms</em>\r\n  Answer the question “Can we build this for ALL the devices?” with a\r\n  resounding YES. This book will help you get there with a real-world\r\n  introduction to seven platforms, whether you’re new to mobile or an\r\n  experienced developer needing to expand your options. Plus, you’ll find\r\n  out which cross-platform solution makes the most sense for your needs.\r\n  </p>\n\n  <div class=\"price_line\">\n  <span class=\"price\">$26.00</span>\n\n   <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=3\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"faFaDWHEcOVsP5x1x8s+A3Zd6fpFbVsW4JZzdDgpNOA+8DhcCpzYUZBaXqm5nMtyexCErxvSPXjDFQ6r2Ho81w==\" /></form>\n\n  </div>\n\n  </div>\n\n\n  <div class=\"entry\">\n\n  <img src=\"/assets/adrpo-23a974519e0d4353c6906f82b40bd4cd98b09a2ce748825370c7aa59763f5ac7.jpg\" alt=\"Adrpo\" />\n  <h3>Ruby Performance Optimization</h3>\n\n  <p>\n  <em>Why Ruby Is Slow, and How to Fix It</em>\n  You don’t have to accept slow Ruby or Rails performance. In this\n  comprehensive guide to Ruby optimization, you’ll learn how to write\n  faster Ruby code—but that’s just the beginning. See exactly what makes\n  Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you\n  through perils of memory and CPU optimization, profiling, measuring,\n  performance testing, garbage collection, and tuning. You’ll find that\n  all those “hard” things aren’t so difficult after all, and your code\n  will run orders of magnitude faster.\n  </p>\n\n  <div class=\"price_line\">\n  <span class=\"price\">$46.00</span>\n\n   <form class=\"button_to\" method=\"post\" action=\"/line_items?product_id=4\" data-remote=\"true\"><input type=\"submit\" value=\"Add to Cart\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"tN4iplT2QTAi9zwvn9ZXkNHwKPJouOcXz+zr0Pnytuz3j0D3P67phN6S/vPhgaLh3L1FpzYHgXnsb5YPGaG+2w==\" /></form>\n\n  </div>\n\n  </div>\n\n"} 
Redirected to http://localhost:3000/products/2 
Completed 302 Found in 23ms (ActiveRecord: 1.8ms) 


    **#assets/javascripts/channels/products.coffee** 
    App.products = App.cable.subscriptions.create "ProductsChannel", 
    connected: -> 
    # Called when the subscription is ready for use on the server 

    disconnected: -> 
    # Called when the subscription has been terminated by the server 

    received: (data) -> 
    # Called when there's incoming data on the websocket for this channel 
    $(".store #main").html(data.html) 



**#app/views/store/index.html.erb** 
    <p id="notice"><%= notice %></p> 

    <h1>Your Pragmatic Catalog</h1> 


    <% cache @products do %> 
     <% @products.each do |product| %> 
     <% cache product do %> 

      <div class="entry"> 

      <%= image_tag(product.image_url) %> 
      <h3><%= product.title %></h3> 

      <%= sanitize(product.description) %> 

      <div class="price_line"> 
      <span class="price"><%= number_to_currency(product.price) %></span> 

       <%= button_to 'Add to Cart', line_items_path(product_id: product.id), remote:true %> 

      </div> 

      </div> 

     <% end %> 
     <% end %> 
    <% end %> 


#app/channels/products_channel.rb 
class ProductsChannel < ApplicationCable::Channel 
    def subscribed 
    # stream_from "some_channel" 
    stream_from "products" 
    end 

    def unsubscribed 
    # Any cleanup needed when channel is unsubscribed 

    end 
end 


#application.html.erb 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Pragprog Books Online Store</title> 


    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <%= csrf_meta_tags %> 
    </head> 

    <body class='<%= controller.controller_name %>'> 

    <div id="banner"> 

     <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %> 
     <span class="title"><%= @page_title %></span> 
    </div> 

    <div id="columns"> 
     <div id="side"> 

     <div id="cart"> 
      <% if @cart %> 
       <%= hidden_div_if(@cart.line_items.empty?, id: 'cart') do %> 
       <%= render @cart %> 
       <% end %> 
      <% end %> 


     </div> 

     <ul> 

      <li><a href="http://www...">Home</a></li> 
      <li><a href="http://www.../faq">Questions</a></li> 
      <li><a href="http://www.../news">News</a></li> 
      <li><a href="http://www.../contact">Contact</a></li> 

     </ul> 

     </div> 

     <div id="main"> 
     <%= yield %> 
     </div> 
    </div> 


    </body> 
</html> 

Answer 1

。

しようとすると言って、あなたのコードを変更：

received: (data) -> 
    $("#main").html(data.html) 

#main要素がページ上に存在するとして。