Why can't the behavior go dynamically?

I am working on Marionette.behavior. I tried to dynamically transfer the hash of the behavior at the time the view was initialized, but it does not get the view attached to the behavior object. Because the behaviors begin to be initialized during the construction of the view, so we reached the solution as follows, but is this the right way to achieve it? is there any other way to achieve? and also why behavior cannot pass dynamically?

Here is the code:

var Behaviour = new Marionette.Application();

Behaviour.addRegions({
    mainRegion:"#main-region"
});


var Person = Backbone.Model.extend({
       defaults:{
         firstName:"NA",
         lastName:"NA",
        phoneNumber:"NA",
        presentAddr:"NA",
        permanantAddr:"NA"
    }
});


var buttonView=Marionette.ItemView.extend({

template:"#buttontemplate",


 constructor:function(options){


     this.behaviors = options.behaviors;
     Marionette.ItemView.apply(this, arguments);

 },


events:{

    "click .display":"displayDetail"
 },

 displayDetail:function(){

     this.triggerMethod("DisplayPersonDetails");

},

//behaviors:{Behavior1:{ },Behavior2:{ }}
})


var PersonDetailsView = Marionette.ItemView.extend({

template:"#static-template",

ui: {
"Change": ".change"
},

events:{

"click @ui.Change":"changeBehavior"
},

 changeBehavior:function(){

},

});

var Behavior1 = Marionette.Behavior.extend({

    onDisplayPersonDetails:function(){

    var person=new      Person({firstName:"abhijeet",lastName:"avhad",phoneNumber:"9604074690",permanantAddr:"sangamner",presentAddr:""})
    var myView = new PersonDetailsView({model:person});
    Behaviour.mainRegion.show(myView);

    }

});

var Behavior2 = Marionette.Behavior.extend({

    onDisplayPersonDetails:function(){


    var person =new Person({firstName:"abhijeet",lastName:"avhad",phoneNumber:"9604074690",permanantAddr:"",presentAddr:"shivajinagar"})
    var myView =new PersonDetailsView({model:person});
    Behaviour.mainRegion.show(myView);


    }

});


Behaviour.on("initialize:after", function(){

    console.log(" started!");

        Marionette.Behaviors.behaviorsLookup = function() {
         return window.Behaviors;
    };  


    window.Behaviors = {};

        window.Behaviors.Behavior1 = Behavior1;
        window.Behaviors.Behavior2 = Behavior2; 

    var buttonview=new buttonView({behaviors:{Behavior1:{ },Behavior2:{}}});
        Behaviour.mainRegion.show(buttonview);  

});
Behaviour.start();
+4
source share
4 answers

Another way to achieve this in your definition is to declare a function that returns the behavior of the supplied one during initialization, for example:

var buttonView=Marionette.ItemView.extend({
    ...
    behaviors: function () {
        return this.options.behaviors;
    },
    ...
+4
source

, :

if (_.isObject(this.behaviors)) {
      new Marionette.Behaviors(this);
}

, , , - , .

+1

, . , , , , . , , .

// Define Behavior.
var Behavior1 = { /* Behavior definition */ }

// Create View like normal.
var view = new ItemView({
    behaviors: {
        behavior1: { behaviorClass: Behavior1 }
    }
});

// Here the ugly part.
view.undelegateEvents();
view._behaviors = Marionette.Behaviors(subview);
view.delegateEvents();

.

+1

behaviorClass :

As you can see from marionette.behaviors docs , for example, we have behavior Tooltipthat we want to convey directly, and not from the global list.

define(['marionette', 'lib/tooltip'], function(Marionette, Tooltip) {
  var View = Marionette.ItemView.extend({
     behaviors: {
        Tooltip: {
          behaviorClass: Tooltip, // <-- passing the behavior directly here
          message: "hello world"
        }
     }
  });
});
0
source

Source: https://habr.com/ru/post/1536455/


All Articles