mwaylabs/The-M-Project — Issue #32: toolbar view will be duplicated if it is used as page footer
Author: jianliao
Created: 2012-02-03 06:45:50+00:00
State: open

Suppose you have two pages, both page reference the same toolbar view object as footer. The first page would display correctly, but when you switch to the second page, two toolbars will be displayed.

Page-1
==============================================================================

// JavaScript Document
m_require('app/views/footer.js');

SurveyFormSample.welcomePage = M.PageView.design({

childViews: 'header content footer',

header: M.ToolbarView.design({

value: 'Dummy Survey',

anchorLocation: M.TOP

}),

content: M.ScrollView.design({

childViews: 'welcomeWord startBtn',

welcomeWord: M.LabelView.design({

value: 'Welcome. Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.'

}),

startBtn: M.ButtonView.design({
value: 'Start Survey',
events: {
tap: {
target: SurveyFormSample.WelcomeController,
action: 'startSurvey'
}
}
})

}),

footer: SurveyFormSample.Footer

});
==============================================================================

Page-2:

==============================================================================
// JavaScript Document
m_require('app/views/footer.js');

SurveyFormSample.basicInfoPage = M.PageView.design({

childViews: 'header content footer',

header: M.ToolbarView.design({

value: 'Dummy Survey',

anchorLocation: M.TOP

}),

content: M.ScrollView.design({

childViews: 'form1',

form1: M.FormView.design({

childViews: 'sectionHeader sexlabel sex agelabel age',

showAlertDialogOnError: YES,

alertTitle: 'Error',

sectionHeader: M.LabelView.design({

value: 'Basic Information',

cssClass: 'bigLabel'

}),

sexlabel: M.LabelView.design({

value: 'Sex:',

cssClass: 'bigLabel'
}),

sex: M.SelectionListView.design({
childViews: 'item1 item2',

selectionMode: M.SINGLE_SELECTION,

cssClassOnError: 'err',

validators: [M.PresenceValidator],

item1: M.SelectionListItemView.design({
value: 'Male',
lable: 'Male',
isSelected: YES
}),

item2: M.SelectionListItemView.design({
value: 'Female',
lable: 'Female'
})

}),

agelabel: M.LabelView.design({

value: 'Age:',

cssClass: 'bigLabel'
}),

age: M.SliderView.design({

min: 20,

max: 60,

value: 20,

cssClassOnError: 'err',

validators: [M.PresenceValidator]
})
})
}),

footer: SurveyFormSample.Footer

});