JSNI (GWT-GWTP):jQuery 在 'document ready' 中的 select 节点在就绪事件触发后起作用
JSNI (GWT-GWTP): jQuery does not select node in 'document ready' function after ready event fires
我正在尝试 select 基于其 CSS ID 的 div 节点,并更改 div 的文本,全部使用 jQuery (2.2.0)。我的问题是 jQuery selection 似乎从来没有正常发生过?
- 那个 jQuery selection 代码(下面,我在 'jquery' fucntion) is within a standard 'document ready' callback function so that the div with CSS ID is "supposedly" ensured to be in the DOM by the time the callback is called. That js code, and its standard JSNI $wnd syntax, resemble the Answers from JSNI GWT jquery.
中使用 '$' shorthand
- 所有这些 jQuery js 都在 GWT JSNI 本机方法 (GWT 2.7.0) 中。
- 我的项目是 GWTP (1.5.1) 项目。
- 所有观察结果都在不同的浏览器中重现,并在生产和开发模式下。
我将从这段代码中解释我是如何确认 JSNI 本机方法 renderTree() 被调用,'document ready' 事件触发,div 与 CSS ID 在 DOM...
public native void renderTree()/*-{
$wnd.alert("renderTree");
$wnd.$($doc).ready(function() {
$wnd.alert("DOM ready!");
$wnd.$('#gramTree').text("text changed from JSNI jQuery");
});
}-*/;
- 我从 GWT 视图的构造函数中调用了 renderTree() class(更具体地说,它是一个 GWTP 扩展 ViewWithUiHandlers)
- 当视图的页面加载时,"renderTree" 弹出警告 window:这证明 renderTree() JSNI 方法在我打算时被调用,作为 renderTree 的第一行是 $wnd.alert.
- 紧接着,"DOM ready!" 弹出警报 window:这证明 'document ready' 事件触发并调用了它的回调 .那是因为回调也是在renderTree() JSNI中注册到事件的,回调的第一行是$wnd.alert
到目前为止,1.-3。一切都按预期发生... 但是“#gramTree”的 jQuery $ selection 似乎从未发生过 ,因为 div ID 从未将其文本更改为 "text changed from JSNI jQuery"(其文本最初从 UiBinder 加载为 "text initialized from UiBinder",并保持这种状态)。
- 我预计 selection 应该发生,因为它是 'document ready' 回调中的第二行,并且 3. 证明调用了回调。
- div 和 ID #gramTree 肯定在 DOM 中,因为我可以在浏览器检查器中看到它,并且我可以看到它的初始文本 ("text initialized from UiBinder") 呈现。该初始文本应该从 'document ready' 回调更改为 "text changed from JSNI jQuery"。 div、它的 CSS ID 和它的初始文本在我的视图的 GWT UiBinder 中声明。
此时我可以通过在浏览器控制台上手动输入 jQuery 代码行来手动更改文本,该代码行似乎无法从回调中运行($('#gramTree').text("text changed from JSNI jQuery");
).同样,我也可以通过编写 renderTree() 代码以从页面上的按钮的单击事件调用并在此时手动单击该按钮来使其手动工作。
知道这里出了什么问题吗?
根据有根据的猜测,给定 4.-5.,'document ready' 事件似乎有些不正常,或者我是如何处理它的?
有什么想法可以进一步检查吗?
谢谢!
我自己发布这个答案作为我在其他地方发现的思考的食物(它是 hackish):从 Deferred ScheduledCommand.
调用 JSNI renderTree() 方法
看来我尝试开始工作的 'document ready' 方法才是真正的 canonical/intended 方法。所以我宁愿弄清楚这一点...
您应该依赖 View Lifecycle 以确保它附加到 DOM。来自 GWTP ViewImpl#onAttach
文档
Method called after the view is attached to the DOM. You should
override this method to perform any ui related initialization that
needs to be done after that the view is attached and that the
presenter doesn't have to be aware of (attach event handlers for
instance)
在您的情况下,当调用 $wnd.$('#gramTree').text("text changed from JSNI jQuery");
时,#gramTree 元素未附加到 DOM 并且对 jQuery 不可见。
我正在尝试 select 基于其 CSS ID 的 div 节点,并更改 div 的文本,全部使用 jQuery (2.2.0)。我的问题是 jQuery selection 似乎从来没有正常发生过?
- 那个 jQuery selection 代码(下面,我在 'jquery' fucntion) is within a standard 'document ready' callback function so that the div with CSS ID is "supposedly" ensured to be in the DOM by the time the callback is called. That js code, and its standard JSNI $wnd syntax, resemble the Answers from JSNI GWT jquery. 中使用 '$' shorthand
- 所有这些 jQuery js 都在 GWT JSNI 本机方法 (GWT 2.7.0) 中。
- 我的项目是 GWTP (1.5.1) 项目。
- 所有观察结果都在不同的浏览器中重现,并在生产和开发模式下。
我将从这段代码中解释我是如何确认 JSNI 本机方法 renderTree() 被调用,'document ready' 事件触发,div 与 CSS ID 在 DOM...
public native void renderTree()/*-{
$wnd.alert("renderTree");
$wnd.$($doc).ready(function() {
$wnd.alert("DOM ready!");
$wnd.$('#gramTree').text("text changed from JSNI jQuery");
});
}-*/;
- 我从 GWT 视图的构造函数中调用了 renderTree() class(更具体地说,它是一个 GWTP 扩展 ViewWithUiHandlers)
- 当视图的页面加载时,"renderTree" 弹出警告 window:这证明 renderTree() JSNI 方法在我打算时被调用,作为 renderTree 的第一行是 $wnd.alert.
- 紧接着,"DOM ready!" 弹出警报 window:这证明 'document ready' 事件触发并调用了它的回调 .那是因为回调也是在renderTree() JSNI中注册到事件的,回调的第一行是$wnd.alert
到目前为止,1.-3。一切都按预期发生... 但是“#gramTree”的 jQuery $ selection 似乎从未发生过 ,因为 div ID 从未将其文本更改为 "text changed from JSNI jQuery"(其文本最初从 UiBinder 加载为 "text initialized from UiBinder",并保持这种状态)。
- 我预计 selection 应该发生,因为它是 'document ready' 回调中的第二行,并且 3. 证明调用了回调。
- div 和 ID #gramTree 肯定在 DOM 中,因为我可以在浏览器检查器中看到它,并且我可以看到它的初始文本 ("text initialized from UiBinder") 呈现。该初始文本应该从 'document ready' 回调更改为 "text changed from JSNI jQuery"。 div、它的 CSS ID 和它的初始文本在我的视图的 GWT UiBinder 中声明。
此时我可以通过在浏览器控制台上手动输入 jQuery 代码行来手动更改文本,该代码行似乎无法从回调中运行(
$('#gramTree').text("text changed from JSNI jQuery");
).同样,我也可以通过编写 renderTree() 代码以从页面上的按钮的单击事件调用并在此时手动单击该按钮来使其手动工作。
知道这里出了什么问题吗?
根据有根据的猜测,给定 4.-5.,'document ready' 事件似乎有些不正常,或者我是如何处理它的?
有什么想法可以进一步检查吗?
谢谢!
我自己发布这个答案作为我在其他地方发现的思考的食物(它是 hackish):从 Deferred ScheduledCommand.
调用 JSNI renderTree() 方法看来我尝试开始工作的 'document ready' 方法才是真正的 canonical/intended 方法。所以我宁愿弄清楚这一点...
您应该依赖 View Lifecycle 以确保它附加到 DOM。来自 GWTP ViewImpl#onAttach
文档
Method called after the view is attached to the DOM. You should override this method to perform any ui related initialization that needs to be done after that the view is attached and that the presenter doesn't have to be aware of (attach event handlers for instance)
在您的情况下,当调用 $wnd.$('#gramTree').text("text changed from JSNI jQuery");
时,#gramTree 元素未附加到 DOM 并且对 jQuery 不可见。