ContentBinding On Custom view

[Gargi Das]

Hello M Project team,

I am making a custom view using jquery mobile collapsible set. But i am unable to use the content binding property can any body help me my custom view code is pasted :

M.CollapsibleListView = M.View.extend({
    type:'M.CollapsibleListView',

    jsonData:null,
    dataLength:4,

    render:function() {
        this.html = '<div id="'+this.id+'"';
        this.html += 'data-role="collapsible-set"';
        this.html += 'data-theme="b"';
        this.html += 'data-content-theme="c">';
        this.html += this.renderCollapsible();
        this.html += '</div>';
        return this.html;
    },

    renderUpdate:function() {
        $('#'+this.id).html(this.value)
        this.render();
    },

    theme:function() {

        if($('#'+this.id).html()) {
            this.log('collapsible view on dom')
        }else {
            this.log('collapsible view not on dom')
        }

    },

    style:function() {
        var styleHtml = '';

        if(this.cssClass) {
            styleHtml += 'class="'+this.cssClass+'"';
        }

        return styleHtml;

    },

    //private methods which are called by the above framework callbacks
    renderCollapsible:function() {
        var titles = this.getTitleArray()

        if(titles.length <= 0) {
            return ''
        }

        var collapsibleHtml = "";
        for(var i = 0; i < titles.length; i++) {
            collapsibleHtml += '<div id="'+this.id+'"';
            collapsibleHtml += 'data-role="collapsible"';
            collapsibleHtml += 'data-theme="b"';
            collapsibleHtml += 'data-content-theme="c">';
            collapsibleHtml += '<h2>';
            collapsibleHtml += titles[i];
            collapsibleHtml += '</h2>';
            collapsibleHtml += this.renderListView();
            collapsibleHtml += '</div>'
        }
        return collapsibleHtml
    },

    renderListView:function() {
        var listViewHtml = '<ul data-role="listview">'

        for(var i =0; i<this.dataLength; i++) {
            var element = "Element_"+i;
            listViewHtml += '<li>';
            listViewHtml += '<a>'
            listViewHtml += element;
            listViewHtml += '</a>'
            listViewHtml += '</li>'
        }

        listViewHtml += '</ul>'
        return listViewHtml
    },

    getTitleArray:function() {
        var titleArray = [];
        if(this.value) {
            var titleContent = this.value;
            this.log('titleContent = '+titleContent.length)
            for(var i =0 ; i <titleContent.length; i++) {
                var title = titleContent[i].title
                titleArray.push(title);
            }
        }
        return titleArray;
    },

    getListDataArray:function() {

    },

    log:function(msg) {
        M.Logger.log('Collapsible Log = '+msg);
    }
});

Thanks,
Gargi

[hano]

Hi,

try to overwrite the contentDidChange method.

contentDidChange: function(){
this.renderUpdate();
//or
var content = this.contentBinding.target[this.contentBinding.property];
}

Does this help?

Best regards

Marco

[Gargi Das]

Hello Marco,

Thanks for your reply, can you also help me to understand how can i handle events in this customeview like click on the parcticular item and also delegate that to my controller class.

Regards,
Gargi

[hano]

Hey,

here is the code for something you want to do (got it from M.Button)

The CustomView:

M.CustomView = M.LabelView.extend({

    registerEvents: function() {

        this.internalEvents = {

            tap: {

                target: this,

                action: 'dispatchEvent'

            }

        };

        this.bindToCaller(this, M.View.registerEvents)();

        //same as: M.View.registerEvents.apply(this);

    },

    dispatchEvent: function(id, event, nextEvent) {

        console.log('internal event');

        if(this.isEnabled && nextEvent) {

            M.EventDispatcher.callHandler(nextEvent, event, YES);

        }

    }

});

The usage of the view:

custom1: M.CustomView.design({

                value: 'Click me!',

                events: {

                    tap: {

                        action: function(){

                            console.log('external tap');

                        }

                    }

                }

            })

if you tap on 'click me' the following log appears:

internal event

external tap 

Working sample: http://www.the-m-project.org/apps/customview/

hope this was helpful

best regards

marco

[Gargi Das]

HI Marco,

i solved the event problem but again facing issues with contentBinding.

I got the content in contentDidChange method , but when i call methods when i update by html its not reflected in the view, so do i need to do something special here. My Method is:

contentDidChange:function() {

var content = this.contentBinding.target[this.contentBinding.property]

// call methods to draw html with the data present !!
// but nothing happens here !!
}

[hano]

Hey,

the contentDidChange function should look like this:

contentDidChange: function(){
  ....

  this.renderUpdate();

  this.delegateValueUpdate();

}
and then inside the renderUpdate make changes to the view. You could change the DOM like its done inside of the buttonview:

renderUpdate: function() {

        this.computeValue();

        $('#' + this.id + ' .ui-btn-text').text(this.value);

    },

was this helpful for you?

best regards

marco