Backbone Views

Creating View

To create a new View you can use the next code:

var myview = new WebixView({
   el:".app1_here",
   config:{
      rows:[
        {template:"ABC"},
        {cols:[...]},
        {view:"some"}
      ]
   }
});

The fields are:

• el - HTML locator or HTML node of the element in which a view needs to be rendered
• config - Webix UI configuration.

To render view somewhere on the page you should call the render() method:

myview.render();

Related sample: View

Isolating Views

It's a good practice to isolate backbone views that are comprised of several Webix views, so that you can use same IDs in another Backbone view on the page:

var ui_config={
    isolate:true, rows:[
        {template:"ABC", id:"abc"},
        {cols:[...]},
        {view:"some"}
    ]
};
 
var firstview = new WebixView({
   el:".app1_here",
   config: ui_config
});
 
var secondview = new WebixView({
   el:".app2_here",
   config:ui_config
});

Each Backbone view has a template with abc ID, but since config features the isolate property you can still refer to the necessary template (for instance in view functions that refer to these components).

You can also render any Webix view directly in an HTML element:

$(".app1_here").webix_list({
    id:"mylist", width:200, //config
    template:"#title#", select:true
});

Related sample: Loading data from Collection

Predefined Methods of View

WebixView is an instance of Backbone.View.

There is a few methods that are already implemented in views created with this constructor:

• render() - renders the view
• destroy() - calls the view destructor
• getRoot() - get the top Webix control in the view
• getChild(id) - get the child Webix control by its ID.

Nesting HTML View into Webix View

You can define a template view, and render there a normal Backbone View later by using the next code:

//webix ui config
var ui_config ={
    isolate:true, type:"wide", rows:[
        { template:"top", height:35 },
        { type:"wide", cols:[
            { template:"left", id:"left" },
            { template:"center", id:"center" },
            { template:"right", id:"right" }
        ]},
        { template:"bottom", height:35 }
    ]
};
 
//create top level view
var v1 = new WebixView({
        config: ui_config,
        el: ".app1_here"
    });
    v1.render();
 
//html child view
cView = Backbone.View.extend({
    tagName: "h2",
    render: function(){
        $(this.el).html("Child View");
    },
});
 
//create child view
var v2 = new cView();
    v2.render();
    v1.getChild("left").setContent(v2.el);

• the getChild method is used here to get layout child with the "left" ID
• the setContent(content) method of the Webix view is used here to attach the Backbone View to template.

Related sample: Nested Views

Nesting Webix View into Another Webix View

Similar to the method above, you can render a Webix view as layout child view with the next code:

//create top level view
var v1 = new WebixView({
        config: ui_config,
        el: ".app1_here"
    });
    v1.render();
 
//create child webix view
var v3 = new WebixView({
        config: ui_config,
        el:v1.getChild("right")
    });
    v3.render();

Related sample: Nested Views

The place where a UI component needs to be attached is defined through the "el" field. New view (v3) will replace the child of v1 view.

Extending View

Same as with Backbone View you can extend WebixView:

MyView = WebixView.extend({
    config:{
       view:"list", url:"data.json"
    },
    afterRender:function(){ ...},
    beforeRender:function(){ ...},
    someMethod:function(){ ...}
});
 
var view1 = new MyView({ el : "areaA" });

There are 2 special methods that can be defined in such way:

• beforeRender() - will be called during rendering before creating a Webix view
• afterRender() - will be called during rendering when Webix view is already created. It's a good place to define event handlers for Webix components of this Backbone view or load data collection.

And at the same time you can add your custom methods here.

MyView = WebixView.extend({
    config:{
        rows:[
            {view:"list", id:"mylist", ..},
            {view:"template", id:"details", ..}
        ]
    },
    afterRender:function(){
        //adding a handler to list selection
        this.getChild("mylist").attachEvent("onAfterSelect",_.bind(this.listSelected,this));
        //syncing view data with collection
        this.getChild("mylist").sync(this.options.collection);
    },
    listSelected:function(id){ 
        this.getChild("details").parse({ "id": id });
    }
});

Related sample: Views and Models

Webix event handling pattern is described in the corresponding documentation article.

Back to top