重装把手从木偶视图部分输了球父视图中的局部模板元素定义访问UI对象 [英] Reloading handlebars partial from marionette view loses access to ui object defined for partial template element within parent view

问题描述

通过参照<一个href=\"http://stackoverflow.com/questions/14623232/re-rendering-handlebars-partial-from-backbone-view\">this链接;我重装我的应用程序内提线木偶视图车把局部模板。

在我的提线木偶认为我在下面

定义用户界面对象

  UI：{
        updateCarrierRow：.hook  - 编辑载波行
        dispatchEquipment：.hook  - 调度设备
        editButton：.hook  - 编辑键，
        trailerText：＃拖车文本，
        tractorText：＃拖拉机文本
    }，
 

从中trailerText＆安培; tractorText变量引用从车把元素模板使用前把手pression当前视图的HTML模板中加载

  {{＆GT; dispatchedEquipement}}
 

应用程序的用户将被编辑从这个局部模板渲染节某些领域等方面的变化提交到服务器，我需要重新载入这个局部模板与父模型修改后的值。

因此​​参照上述链接我已经重新装上使用以下code段父视图局部模板

<$p$p><$c$c>this.ui.dispatchEquipment.empty().html(Handlebars.compileClean(dispatchEquipmentSectionPartial)({
                        dispatchInformation：that.model.get（dispatchInformation），displayText：localizedText.displayText
                    }））;

通过这个code我已经成功地重新加载局部视图我父母的看法，但在随后的编辑操作，当我尝试局部模板内的输入元素的访问值或试图改变/添加CSS类，它不会与下面的工作code说明书

  this.ui.trailerText.val（）;
 

或

  this.ui.tractorText.val（）;
 

这让我空值，虽然文本框中包含正确的价值观。而同样的情况与例如：

父视图this.ui对象的帮助下添加或删除CSS类这些元素

  this.ui.tractorText.addClass（隐藏）
 

不会隐藏的CSS类添加到元素。

截至目前我已经设法把事情用jQuery id选择这些元素的帮助工作。不过，我想知道我应该怎么解决这个问题？
先谢谢了。

解决方案

我觉得这是因为当视图初始化的UI元素绑定，但在视图的生命周期清空，从而取代HTML不再有你的UI元素绑定到什么现在是在屏幕上。

您可以尝试调用this.bindUIElements（）之后，但不能完全确定，因为我从来没有使用它这样的。

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.

解决方案

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.

这篇关于重装把手从木偶视图部分输了球父视图中的局部模板元素定义访问UI对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！