Passing bootstrap-tour a ui object using Backbone js

Question

I'm using boostrap-tour version 10.1 with a Backbone/Marionette app. I have extended my base view prototype to include a tour (by way of custom function _ui_tour() ) but I am having trouble passing it an element for the step to be applied to.

Layout.SideBarView = App.Views.ItemView.extend({
    template: App.Templates['main-layout-sidebar'],

    ui: {
        MENU_ITEM_DASHBOARD: '[data-js-menu-item-dashboard]'
    },

   ...

    onShow: function () {
        this._ui_tour({
            this.ui.MENU_ITEM_DASHBOARD: 'This is a title' //this breaks it
        })
    }
});

Swapping the call to _ui_tour with the following works perfectly.

this._ui_tour({
            '[data-js-menu-item-dashboard]': 'This is a title'
        })

The _ui_tour func in my base look like this:

_ui_tour: function (items) {
    for (var key in items) {
        var tour = new Tour({ debug: true });
        tour.addStep({
            element: key,
            title: items[key],
            content: 'This is content'
        });
        tour.init();
        tour.start(true);
        }
    }
}

The error states: Uncaught SyntaxError: Unexpected token . I can't tell what is wrong with using this.ui.BLANK because I use it in other places.

score 0 · Answer 1 · answered Aug 14 '15 at 13:21

If you want to set the property of an object dynamically you can't use the literal syntax, you need to instantiate the object first and then set the property and its value through array syntax, i.e.

var tourConfig = {};
tourConfig[this.ui.MENU_ITEM_DASHBOARD] = 'This is a title';
this._ui_tour(tourConfig);

Passing bootstrap-tour a ui object using Backbone js

1 Answers1