Reloading handlebars partial from marionette view loses access to ui object defined for partial template element within parent view

问题

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();

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.

回答1:

I reckon it is because the ui elements are bound when the view is initialized but during the life cycle of the view you empty and replace the html thereby no longer having your ui elements bound to what is now on screen.

you could try calling this.bindUIElements() afterwards but not fully sure as i've never had to use it like that.

来源：https://stackoverflow.com/questions/24115096/reloading-handlebars-partial-from-marionette-view-loses-access-to-ui-object-defi

标签

backbone.js

handlebars.js

marionette