Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Posts: 14
Registered: ‎11-15-2010
My Device: Not Specified
Accepted Solution

Newbie Javascript Question RE: Actionbar

I'm a newbie to this whole thing so I apologize.

 

I'm using the below checklist.js for the creation of checklists.  Can anyone show me what command I would place in onclick section of the action bar script to execute a clear list?

 

<div data-bb-type="action" data-bb-style="tab" data-bb-img="images/CLC.png" onclick="WHAT DO I PUT HERE?">Clear List</div>
 
 
-------------------------------------------------------------------------------------------------------------------
 
var Checklist = Checklist || function () {

    // The checklist object.
    var checklist;

    // Define the model.
    var CheckBoxModel = Backbone.Model.extend({
        defaults: {
            checked: false
        }
    });

    // Define the collection.
    var CheckBoxCollection = Backbone.Collection.extend({
        model: CheckBoxModel,

        // Gets an existing model, otherwise creates new and returns.
        gain: function(id) {
            if (!this.get(id)) {
                this.add({
                    id: id
                });
            }
            return this.get(id);
        }
    });

    // Define the view associated with a checkbox.
    var CheckBoxView = Backbone.View.extend({
        tagName: 'input',

        attributes: {
            type: 'checkbox',
            class: 'checklist-checkbox'
        },

        events: {
            'change': 'change'
        },

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
        },

        render: function() {
            this.$el.attr('checked', this.model.get('checked'));

            return this;
        },

        change: function () {
            this.model.save({
                checked: this.$el.is(':checked')
            });
        }
    });
 
    var ClearButtonViewLink = Backbone.View.extend({
        tagName: "a",
        attributes: {
            href:"javascript&colon;;"
        },
        events: {
        
            "click": 'click'
        },
        initialize: function () {
        },
        render: function (listId) {
            $(this.el).attr('list-id', listId);
            $(this.el).append("Reset Checklist");
            return this;
        }
    });
 
    //Define Clear Button
    var ClearButtonView = Backbone.View.extend({
        tagName: "div",
        attributes: {
            class: 'btn-clear-list'    
        },
        initialize: function () {
        },
        render: function (listId) {
            var link = new ClearButtonViewLink();
            $(this.el).append(link.render(listId).el);   
            return this;
        }
    });

    // Define the view associated with a list item.
    var ListItemView = Backbone.View.extend({
        initialize: function() {
            var checkBoxView = new CheckBoxView({
                model: this.model
            });
            this.$el
            .prepend(checkBoxView.render().el)
            .wrapInner('<label />');

            this.listenTo(this.model, 'change', this.update);
            this.update();
        },

        update: function() {
            this.$el.attr('data-checked', this.model.get('checked'));
        }
    });

    // Attaches checklist views to HTML list items.
    var attachChecklist = function(checklist) {
    
        //@heck - Was not able to access the checklist in ClearButtonView,
        //thats why have employed an additional liste
        $( document ).on( "click", ".btn-clear-list a", function() {
            var list = $('#'+$(this).attr("list-id"));
            list.find('li').each(function(index){
                $(this).attr('data-checked', false);  
                var model = checklist.gain(list.attr('id')+'-'+index);           
                model.save({
                    checked: false
                });

            });
        });
     
   
    
        $('.checklist').each(function(index) {
            //prepend a clear button
      
            var clearButtonView = new ClearButtonView();
            $(this)
            .prepend(clearButtonView.render($(this).attr('id')).el, checklist);
        
            // Get an HTML list ID.
            var checklistId = $(this).attr('id') || '_checklist_' +  index + '_';

            $(this).find('>li').each(function(index) {

                // Attach a view to a list item.
                new ListItemView({
                    el: $(this),
                    model: checklist.gain(checklistId + '-' + index)
                });
            });
        });
    };

    // Returns init function.
    return {
        init: function(storageId) {

            // Set falback storage ID based on the current URL.
            storageId = storageId ||  window.location.origin + window.location.pathname;

            // Create local storage with given ID.
            _.extend(CheckBoxCollection.prototype, {
                localStorage: new Backbone.LocalStorage(storageId)
            });

            // Create collection instance.
            this.checklist = new CheckBoxCollection();

            // Fetch data from the storage.
            this.checklist.fetch({
                success: attachChecklist
            });
        }
    }
}();
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Newbie Javascript Question RE: Actionbar

[ Edited ]

Based on the documentation, it doesn't appear that this is a standard function (i.e. to reset all boxes to unchecked.)
http://dealancer.github.io/checklist.js/

 

The Github page would be a good place to make the request for this to be added.

 

 

I did some Web Inspectoring on the sample provided here:
http://dealancer.github.io/checklist.js/

 

And while it appears that you can view the individual items via Checklist.checklist.models, it does not appear that there is any built in functionality to programmatically change the values such that it is also reflected in the UI, nor reset the list.

 

Edit in blue.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.