By referring the this link; I am reloading the handlebars partial template from marionette view within my application.
In my marionette view I have defined ui object as below
ui: {
updateCarrierRow: ".hook--edit-carrier-row",
dispatchEquipment: ".hook--dispatch-equipment",
editButton: ".hook--edit-button",
trailerText: "#trailer-text",
tractorText: "#tractor-text"
},
From which trailerText & tractorText variables are referencing the elements from handlebars template loaded within current view's html template using Handlebars expression
{{> dispatchedEquipement}}
application user will be editing some fields from section rendered with this partial template so on changes submitted to server I need to reload this partial template with modified values from parent model.
So by referring link mentioned above I have reloaded partial template on the parent view using following code segment
this.ui.dispatchEquipment.empty().html(Handlebars.compileClean(dispatchEquipmentSectionPartial)({
"dispatchInformation": that.model.get("dispatchInformation"), "displayText": localizedText.displayText
}));
With this code I have successfully reloaded the partial view on my parent view but on subsequent edit operations when I try to access values of input elements within partial template or trying to change / add css classes it wont work with following code statment
this.ui.trailerText.val();
or
this.ui.tractorText.val();
It gives me empty value though text boxes contains proper values. and same happens with adding or removing css class of these elements with the help of this.ui object of parent view for example
this.ui.tractorText.addClass("hidden")
wont add hidden css class to element.
As of now I have managed to get things working with the help of jQuery id selector for those elements. But I would like to know how should I resolve this issue? Thanks in Advance.