레일 5로 애자일 웹 개발 - 액션 케이블

Question

나는이 책에서 ActionCable 예제를 사용하고 있습니다. 모든 코드가 설명 된대로 추가되고 ActionCable 서버 로그를 볼 수 있지만 업데이트 페이지는 항목의 비용을 업데이트하지 않습니다. 내가 뭘 놓치고 있니?

다음 로그 항목은 ActionCable이 실행 중임을 알려줍니다. 코드는 아래와 같습니다. 당신은 당신이 게시 코드에 클래스 store 인 요소를 가지고 있지 않기 때문에 당신의 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

당신은 존재하는 (.store #main)를 보이지 않는 요소에 액세스하려고합니다.

시험 후 코드를 변경 말하려면 : #main 요소가 페이지에 존재

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

으로.