Home  ›  Backbone Call Child View Again but New Instance

Backbone Call Child View Again but New Instance

Written By Saturday 14 May 2022 Add Comment Edit

Backbone.Courier

A tiny library that chimera events ("messages") up your backbone.js view hierarchy.

How it works

Instead of using view.trigger(), use view.spawn( messageName, [data] ) to spawn a message.

                
                                                            this                                                                                      .                                                                    spawn                                                                                              (                                                                                                                              "                                                    selected                                                      "                                                                                                    ,                                                                                                  this                                                                          .                                                                          model                                                                                                  )                                                                                                            ;

The bulletin is triggered, merely like a normal backbone outcome, and in improver, it volition automatically bubble up you view bureaucracy. The view's parent can then "handle" the bulletin and / or laissez passer it to the parent's ain parent, so on. The DOM tree is used to determine the view hierarchy.

Here is an case of a view that both spawns a message to its ancestors, and handles a message from its children.

                
                                      MyViewClass                                          =                                                                                  Backbone                                                              .                                                              View                                                                                      .                                                                    extend                                                                                              (                                                                                                  {                                                                                                    
                
                                                                                                                                                                  initialize                                                                                                          :                                                                                                          part                                                                                                              (                                                                                      )                                                                                                                                                        {                                                                                                    
                
                                                                                                                                      Backbone                                                                          .                                                                          Courier                                                                                                      .                                                                                add                                                                                                              (                                                                                                                  this                                                                                                                  )                                                                                                                                ;                                                                                                                            
                
                                                                                                                                      }                                                                                                    
                
                                                                                        events                                                  :                                                                                                  {                                                                                                    
                
                                                                                                                                                                  "                                                    click div.close-box                                                      "                                                                                                                            :                                                                                                                              "                                                    _closeBoxClicked                                                      "                                                                                                                              
                
                                                                                                                                      }                                                                          ,                                                                                                    
                
                                                                                        onMessages                                                  :                                                                                                  {                                                                                                    
                
                                                                                                                                                                  "                                                    selected                                                      "                                                                                                                            :                                                                                                                              "                                                    _onChildSelected                                                      "                                                                                                                              
                
                                                                                                                                      }                                                                                                    
                
                                                                                                                                                                  _onChildSelected                                                                                                          :                                                                                                          role                                                                                                              (                                                                                                                  data                                                                                      ,                                                                                                                  source                                                                                      ,                                                                                                                  messageName                                                                                                                  )                                                                                                                                                        {                                                                                                    
                
                                                                                                                                                                  alert                                                                                                              (                                                                                                                                                  "                                                            My child view just spawned the 'selected' bulletin.                                                              "                                                                                                                                                )                                                                                                                                ;                                                                                                    
                
                                                                                                                                      console                                                                                                      .                                                                                log                                                                                                              (                                                         data                                                          )                                                                                                                                ;                                                                                                                            
                
                                                                                                                                                                  assert                                                                                                              (                                                         source                                                          instanceof                                                                                                                  Backbone                                                                                      .                                                                                      View                                                                                                                  )                                                                                                                                ;                                                                                                    
                
                                                                                                                                                                  assert                                                                                                              (                                                         messageName                                                          ===                                                                                                                                                  "                                                            selected                                                              "                                                                                                                                                )                                                                                                                                ;                                                                                                    
                
                                                                                                                                      }                                                                                                    
                
                                                                                                                                                                  _closeBoxClicked                                                                                                          :                                                                                                          function                                                                                                              (                                                                                      )                                                                                                                                                        {                                                                                                    
                
                                                                                                                                      this                                                                                                      .                                                                                spawn                                                                                                              (                                                                                                                                                  '                                                            closeBoxClicked                                                              '                                                                                                                                                )                                                                                                                                ;                                                                                                    
                
                                                                                                                                      }                                                                                                    
                
                                                                                                              }

Methods and Belongings reference

Public API alphabetize

  • Backbone.Courier.add( view ) - add courier functionality to view
  • view.spawn( messageName, [information] ) - spawn a message to pass upwardly the view hierarchy
  • view.onMessages - (hash) determines how messages from child views are handled
  • view.passMessages - (boolean or array) determines which messages are passed on to the parent view

Backbone.Courier.add( view )

Adds courier methods and beliefs to view. To add together courier functionality to all of your views, just wrap Backbone.View.initialize:

                
                                                            var                                         oldInitialize                                          =                                                                                  Backbone                                                              .                                                              View                                                              .                                                              prototype                                                              .                                                              initialize                                                              ;                                                      
                
                                                            Backbone                                                              .                                                              View                                                              .                                                              image                                                                                      .                                                                    initialize                                                                                          =                                                                                          role                                                                                              (                                                                          )                                                                                                                                {                                                      
                
                                                                                Backbone                                                              .                                                              Courier                                                                                      .                                                                    add                                                                                              (                                                                                                  this                                                                                                  )                                                                                                            ;                                                      
                
                                                                                return                                                                                  oldInitialize                                                                                      .                                                                    apply                                                                                              (                                                                                                  this                                                                          ,                                                                                                  arguments                                                                                                  )                                                                                                            ;                                                      
                
                                                            }                                                              ;

view.spawn( messageName, [data] )

The spawn method generates a new message and passes it to the view'southward "parent", i.e. the closest ancestor view in the DOM tree. (Information technology also calls view.trigger( messageName, data ) so that y'all can listen to the message as you would a normal Courage consequence.) The parent view can "handle" this message, taking some action upon its receipt, past including an entry for this message in its onMessages hash, or it can pass this message to its ain parent, using its passMessages holding. In this manner the bulletin may bubble up the view hierarchy, as determined (past default) by the DOM tree.

messageName is the name of the message being spawned. The name is used in the onMessages and passMessages properties of antecedent views to handle or pass the message further upwards the view bureaucracy, respectively.

information is awarding divers data that volition be available to this view's ancestors when handling or passing this message.

Round trip messages

If messageName ends in !, the bulletin is considered a "round trip message". Round trip messages are special in that they return values. That is, the spawn() method will return the value returned past the first (and simply) method that handles the message. Using circular trip messages, views can obtain dynamic information virtually their environment that, because it is dynamic, tin can non be passed in through configuration options. Round trip letters are special in that they will continue to be passed upwards the hierarchy until they are handled - regardless of the value of each intermediate view's passMessages property. If they are non handled, spawn() returns undefined.

view.onMessages

The onMessages hash is the means past which a parent view can take action on, or "handle", messages received from its children. Entries in the onMessages hash take the format:

              "messageName source" : callback
  • The messageName portion is matched confronting the proper noun of the messages that are received.
  • The source portion can exist used to lucifer only messages that come from a particular child view. In club to map the source proper noun to a item child view, past default Backbone.Courier expects a hash of child views to exist stored in view.subviews, the keys of the hash being the names of the child views, and the values references to the child view objects. You can create this hash yourself, but an easier approach is to utilize the Backbone.Subviews mixin, which will automatically create information technology for y'all. (You may also override view._getChildViewNamed() to customize how source mapped to kid view objects.)
  • The "callback" portion determines what is washed when a matching message is received. Only like Backbone'due south events hash, you can either provide the callback as the name of a method on the view, or a direct function torso. In either case, the callback is invoked with three arguments:
    1. data is an application defined data object, equally provided the in second statement to view.spawn()
    2. source is the child view object that spawned or passed this message to this view.
    3. messageName is the name of the message

Example entries in the onMessages hash:

                
                                      onMessages                                          :                                                                                  {                                                      
                
                                                                                                                                  "                                                                          focused                                                                          "                                                                                                                  :                                                                                          part                                                                                              (                                                                                                  data                                                                          ,                                                                                                  source                                                                                                  )                                                                                                                                {                                                      
                
                                                                                                        alert                                                                                              (                                                                                                                              "                                                    child view focused                                                      "                                                                                                                            )                                                                                                            ;                                                      
                
                                                                                console                                                                                      .                                                                    log                                                                                              (                                                 source                                                  )                                                                                                            ;                                                                          
                
                                                                                }                                                              ,                                                      
                
                                                                                                        "                                            selected resourcesCollectionView                                              "                                                                                                        :                                                                                                          "                                            _onResourceSelected                                              "                                                                                    ,                                                      
                
                                                                                                                                  "                                                                          giveMeInfo!                                                                          "                                                                                                                  :                                                                                          function                                                                                              (                                                                          )                                                                                                                                {                                                      
                
                                                                                var                                         value                                          =                                                                                  this                                                                                      .                                                                    _calculateDynamicValue                                                                                              (                                                                          )                                                                                                            ;                                                      
                
                                                                                return                                         value                                          ;                                                      
                
                                                                                }                                                      
                
                                                            }                                                              ,                                                      
                
                                                                                    _onResourceSelected                                                                                          :                                                                                          role                                                                                              (                                                                                                  data                                                                                                  )                                                                                                                                {                                                      
                
                                                            }                                                      
                
                                                            ...

view.passMessages

The passMessages holding is used to pass messages received from a child view further up the view bureaucracy, to potentially exist handled past a more distant ancestor. If the property is false which is the default, no letters are passed through the view. If the proerty is truthful, all (unhandled) messages are passed through the view. If the belongings is an assortment, only letters with the names it contains volition be passed through. If / when the bulletin is somewhen handled further upward the bureaucracy, the source of the message will be the view from which it was originally spawned.

...

                              ## Internal view methods that may be overridden  The post-obit methods may be overridden to customize Backbone.Courier for your environment. To override one of the methods, attach your own version of the method to your view objects either before or afterward calling Backbone.Courier.add together().  ### view._getParentView()  `view._getParentView()` is an internal method that returns a view'due south "parent view". You lot may supply your own version of this method on your view objects (which will override the default implementation) if you want to provide a custom means to determine a view's parent. The default implementation determines a view's parent by its position in the DOM tree, scanning the tree for the closest parent that has a Backbone view in $( el ).data( "view" ). This data value is assail each view'southward DOM element automatically by Backbone.Courier.  > Note: The default implementation of '_getParentView' depends on jQuery's or Zepto's `$.parent()` and `$.information()` methods, which is the only dependency on a DOM library or tree in Backbone.Courier.  ### view._getChildViewNamed( childViewName )  `view._getChildViewNamed( childViewName )` is an internal method that is used to resolve the child view names optionally supplied in the `source` part of the `onMessages` hash. You lot may supply your ain version of this method on your view objects in order to shop child views in a location other than the default `view.subviews[ childViewName ]`.  ## Encapsulated Views  Although Backbone.Courier is a simple library with a very small footprint, its use significantly improves encapsulation in the view layer. Encapsulation makes modules easy to conceptualize, maintain and test. Courage views that are encapsulated, and Courage applications congenital from encapsulated views, have these aforementioned characteristics. Merely what practise encapsulated views wait similar and how does courier assist? Here's our vision:  * Views *never accept any explicit dependencies on their surroundings or their environment*. That is, they exercise not have whatsoever explicit dependencies on or references to their ancestors or their siblings. * When a view needs to interact with its parent or an ancestor, it does and so (*without* explicit dependencies) past spawning a message that bubbles up the view hierarchy. * When views pass messages from their children to their ancestors, they alter those messages in order to make them advisable for the new, larger context and hide private concerns. * Views only phone call methods on their *immediate* children. Their grandchildren can be interacted with only by calling methods on their children, which in plough call methods on their grandchildren, etc. * Global variables and / or event aggregators are not used.  > Note: Yous tin use Backbone.Courier with [Backbone.Subviews](https://github.com/rotundasoftware/backbone.subviews) and > [Cartero](https://github.com/rotundasoftware/cartero) / [Parcelify](https://github.com/rotundasoftware/parcelify) for a completely modularized backbone.js feel.  ## Dependencies  * Backbone.js (tested with v0.nine.9 and later, untested with earlier versions) * jQuery or Zepto. Yous tin can eliminate this dependency by overriding `view._getParentView()` and providing an alternate ways to make up one's mind view bureaucracy that does non rely on the `$.parent()` and `$.data()` functions.  ## Modify log  #### v4.0.0 * BREAKING: The old `passMessages` hash is no longer a hash. Information technology is now either a boolean or an array of the message names that should exist passed through the view. Also, the `source` of the message will now remain the same when it is passed. That is to say, when the bulletin is eventually handed, its `source` will exist the view that originally spawned information technology, instead of the view that nearly recently passed it.  #### v3.0.0 * BREAKING: Circular trip letters will no longer thrown an exception if they are not handled. Instead, the `spawn()` method volition simply return `undefined`.  #### v1.0.0  * BREAKING: Changed signature of `callback` portion of `onMessages` hash from `function( bulletin )` to `function( data, source, messageName )`. Sorry, this is a big breaking alter existing projects volition demand to be changed to work with this new signature. However, it is the correct thing to practice. If you don't want to change your existing projects, simply keep using v0.6.one. * Removed the ability to supply a function equally the value of an entry in the `passMessages` hash.  #### v0.6.i  * Small-scale bug fix that could cause errors of the grade `Cannot read property 'data' of undefined`.  #### v0.6.0  * BREAKING: Removed `spawnMessages` hash. Use version v0.5.x if you lot desire this functionality back. * Now `view.spawn( information )` will phone call backbone'due south native `view.trigger( data )` automatically. * Added UMD wrapper.

swanntiondes1946.blogspot.com

Source: https://www.npmjs.com/package/backbone-courier

0 Response to "Backbone Call Child View Again but New Instance"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel