Directory structure and template syntax and other documentation

Rails directory structure: ruby-china.org/topics/2432

Rails template syntax: ihower. Tw /rails4/acti… VPN access may be required

Rails Layout and View rendering: guides.ruby-china.org/layouts_and…

SCSS syntax: sass.bootcss.com/

Jquery ujs: github.com/rails/jquer…

git:git-scm.com/book/zh/v2

Layout and template inheritance

app/views/layouts/sample_layout.html.erb
Copy the code

A typical layout file would contain the following blocks.

. <head>... <%= yield :extro_styles %> </head> ... <body> ... <%= yield :extro_scripts %> </body>Copy the code

In this way, we can introduce external styles and scripts on specific pages, or embed styles and scripts, so that styles and scripts have a proper place in the HTML.

. <% content_for :extro_styles do %> <%= stylesheet_link_tag "jquery.multiselect2side_2.css", :media => "all" %> <style>... </style> <% end %> ... <% content_for :extro_scripts do %> <script src="/assets/jquery.sparkline.js"></script> <%= javascript_include_tag "jquery.multiselect2side_2.js" %> <script>... </script> ... `Copy the code

The position of the above code in the template of the page does not matter; the final position in the HTML is already declared in the layout.

Organization of static files

style

app/assets/stylesheets/application.css

Application. CSS requires the common styles of the site including.css. SCSS introduced separately in debug mode and compressed in application.

If a new module is added, you can add CSS in the format of application. CSS and require the style used by the module alone, and introduce it in the layout of the module, and place it under the introduction of application. CSS.

The script

app/assets/javascripts/application.js

Same with style.

The picture

If a module is added, create a new folder to organize the image properly.

Partial and js. Erb

Partial is used to render the same template fragment (such as a module’s public menu) on different pages. Partial names start with an underscore. Styles and scripts are best written in blocks within the template.

.js.erb responds to an Ajax request and returns javascript type data, typically containing something like the following

    $("#container_id").html(<%=j(render:partial=>'/new_card_analysis/people_consume_ability_vs_date_left') % >")
Copy the code

This part of the code logic is to select the container element on the page and replace the HTML in the element. Therefore, it is recommended not to write styles and scripts in partial. Multiple Ajax requests will render the same styles and scripts repeatedly (such as binding the same event to the same element multiple times). If you need an Ajax request to execute the JS, you can do it in.js.erb because you’re returning javascript type data, and it’s more appropriate to write the script here rather than replace the container element’s HTML and include the script.

About the jquery ujs

Github.com/rails/jquer… Jquery_ujs is a Rails gem package that will add the jquery_ujs.js file to the project. The ‘application.js’ in the project already introduces //= require jquery_ujs. See github.com/rails/jquer…

Common Ajax form submissions can be <%= form_for… %>:remote=>true<% end %> So that the final form tag contains data-remote=”true”(it is also possible to add this attribute directly to the HTML form tag), which will be executed after the form is submitted

    
    $.ajax({method:"post".dataType:"script". })Copy the code

Make an Ajax request based on jquery and declare that the request format is script. The back end can respond to the request via.js.erb or declare in the action that the data type returned is javascript and render templates for other paths, or simply return javascript strings.

If you need to execute other interactions on the page besides the response content in.js.erb, you can write it manually.ajax({method:”post”,dataType:”script”,…. }).done(function(){ … // Other interactive logic. })

With AJAX

The data type first scheme is in JSON format.

    $button.on("click".function(e){
        e.preventDefault();// Block the default browser behavior for this element (anchoring behavior, form submission behavior)
        var $this = $(this),form = this.form;// The form element will have a.form attribute pointing to the form
        var params = {url:"".processData:processData,method:"post".dataType:"json".data:data,beforeSend:function(jqXHR,settings){$this.data('text', $this.text());// Save the default text of the button
                        $this.prop('disable'.true);// Avoid multiple clicks during submission
                        $this.text('Submitting... ');  
                      },....}  
        //processData Boolean. Ajax requests default to true if the form has less data
        //data = {key1:$element1.val(),key2:$element2.val()}
        //processData Params does not need to add the processData property to the processData property. By default, jquery internally converts the object literal to "key1=val1&key2=val2" and sends it to the back end
        // If the form has more data
        // data = $(form).serialize() directly converts all form elements in the form to "key1=val1&key2=val2"
        // processData The value must be false
        $.ajax(params).done(function(data, textStatus, jqXHR){  
           //data depends on the dataType of the request. "HTML" is a string and "json" is an object literal
           $containerElement.html(data);
        }).fail(function(jqXHR, textStatus, errorThrown){  
            alert(textStatus);// Error message, the back end needs to return HTTP code is not 200, depending on the error type
        }).always(function(data|jqXHR, textStatus, jqXHR|errorThrown){  
            // Whether the request succeeds or fails
            $this.prop('disable'.false); // Restore the clickable state
            $this.text($this.data('text')); // Restore the default text
        });  
    });  
Copy the code

About “delete” :

<a href="/users/5" data-method="delete" rel="nofollow" data-confirm="Are you sure?" >Delete</a>Copy the code

The above example uses the data-method=”delete” attribute to bind events. When the user clicks to initiate an Ajax request, HTTP method is delete (we can replace delete with POST, avoiding the use of get requests so that the browser can open the “delete” directly). Before this, because data-confirm exists, window.confirm browser will be called to open a confirmation dialog box to ask the user whether to perform this operation. When deleting operation, we generally need the user to confirm to avoid the user mistakenly clicking and deleting data.