Ember.js + JQuery-UI工具提示 - 工具提示不反映模型/控制器更改 [英] Ember.js + JQuery-UI Tooltip - Tooltip does not reflect the model / controller changes
问题描述
上下文
我有一个小型的Ember应用程序，其中包括一些连接的用户，当悬停页面的元素时，他们的名字作为一个列表。
总而言之，它的工作相当不错。应用程序每两分钟从REST端点提取数据，因为后端不允许推送数据。
工具提示的内容是在Controller中计算的，其功能是根据上下文以各种方式基本连接字符串。然后它被绑定到创建工具提示的< img> 的数据属性。当视图准备好并且 didInsertElement 被触发时，根据这个 data-bindattr 值
问题
从后端拉出新数据时，所有内容都会相应更新，工具提示内容。 （浏览页面的DOM时， data-bindattr 值也会更新。）
导致工具提示不刷新？是否是JQuery-UI不再计算的情况？
某些代码
刷新应用程序控制器中的代码：
Monitor.ApplicationController = Ember.ArrayController.extend（{
itemController：'process' ，
sortProperties：['name']，
sortAscending：true，
intervalId：undefined，
startRefreshing：function（）{
var self = this;
if（self.get（'intervalId'））{
return;
}
self.set（'intervalId'，setInterval（function（）{
self.store .find（'process'）;
}，120000））;
}
}）;
查看：Process.hbs
< div {{bind-attr class =：inline inactive：inactive}}>
< img {{bind-attr src = icon}} {{bind-attr data-caption = contentText}} class =caption/>
< div class =counter> {{nbUsers}}< / div>
< / div>
查看：ProcessView
Monitor.ProcessView = Ember.View.extend（{
//（...）各种东西
didInsertElement：function（）{
this.updateTooltip（） ;
}，
updateTooltip：function（）{
console.log（'Inside updateTooltip！'）;
if（！this。$（））{return;}
if（this.get（'controller'）。get（'inactive'））{
this。$（）。tooltip（{items：'.caption'，disabled：true}）;
$ b这个$（）。tooltip（{
items：'.caption'，
tooltipClass：'tooltip'，
content：function （）{
return $（this）.data（'caption'）;
}，
position：{
my：'left + 15px center'，
at：'right center'，
collision：'flip'
}，
show：false，
hide：false
}）;
}。观察（'controller.inac tive'，'controller.contentText'）
}）;
控制器：ProcessController
Monitor.ProcessController = Ember.ObjectController.extend（{
contentText：function（）{
var tooltipContent ='';
this.get（'containers'）。 forEach（function（container）{
//做很多事情to tooltipContent涉及：
// container.get（'name'）
// container.get（'text'）
// container.get（'size'）
// container.get（'nbUsers'）
// data-bindattr值正确刷新，因此我将其剪切出来，以便可读性。 b $ b return tooltipContent;
} .property（'name'，'containers。@ each'）
}）;
编辑1：
在观察者中用'contentText'替换' >
所以原来我的代码声明和初始化一个工具提示，但一旦完成，你不能更改c同样的方式，加上它不必要的计算。感谢@ GJK的回答和那个问题，我发现发生了什么。原来你需要设置工具提示的内容来刷新它，而不是重新创建它。
这是Ember集成的工作代码：
Monitor.ProcessView = Ember.View.extend（{
//其他东西
didInsertElement：function（）{
this.initTooltip（）;
}，
initTooltip：function（）{
if（！this。$（））{return;}
if（this.get控制器'）get（'inactive'））{
this。$（）。tooltip（{items：'.caption'，disabled：true}）;
return;
}
this。$（）。tooltip（{
items：'.caption'，
tooltipClass：'tooltip'，
content：function（）{
return $这个）.data（'caption'）;
}，
position：{
my：'left + 15px center'，
at：'right center'，
碰撞：'flip'
}，
显示：false，
hide：false
}）;
}，
updateTooltip：function（）{
if（！this。$（））{return;}
if（this.get（'controller'）。get（'inactive' ））{
this。$（）。tooltip（{items：'.caption'，disabled：true}）;
return;
}
content = this.get（'controller'）。get（'contentText'）;
this。$（）。tooltip（选项，内容，内容）;
} .observes（'controller.contentText'）
}）;
作为一个额外的好处，您可以避免将data属性用作缓冲区，虽然我不知道为什么。
Context
I have a small Ember app, which, amongst other things, displays a number of connected users and, when hovering an element of the page, their names as a list.
All in all, it works quite well. The applications pulls data from a REST endpoint every two minutes, as the backend didn't allow for pushing data.
The contents of the tooltip are computed in the Controller, with a function that basically concatenate strings in various ways according to the context. Then it's bound to a data attribute of the <img> the tooltip is created on. When the View is ready and didInsertElement is fired, the tooltip is generated (if needs be) based on this data-bindattr value.
Question
When new data is pulled from the backend, everything is updated accordingly, except the tooltip content. (When browsing the page's DOM, the data-bindattr value is updated too.)
What could cause the tooltip to not refresh? Is it a case of JQuery-UI not calculating it again?
Some code
Refreshing code in the app's controller:
Monitor.ApplicationController = Ember.ArrayController.extend({
itemController: 'process',
sortProperties: ['name'],
sortAscending: true,
intervalId: undefined,
startRefreshing: function() {
var self = this;
if (self.get('intervalId')) {
return;
}
self.set( 'intervalId', setInterval(function() {
self.store.find('process');
}, 120000 ));
}
});
View: Process.hbs
<div {{bind-attr class=":inline inactive:inactive"}}>
<img {{bind-attr src=icon}} {{bind-attr data-caption=contentText}} class="caption" />
<div class="counter">{{nbUsers}}</div>
</div>
View: ProcessView
Monitor.ProcessView = Ember.View.extend({
// (...) Various stuff.
didInsertElement: function() {
this.updateTooltip();
},
updateTooltip: function() {
console.log('Inside updateTooltip!');
if (!this.$()) {return;}
if (this.get('controller').get('inactive')) {
this.$().tooltip({items: '.caption', disabled: true});
return;
}
this.$().tooltip({
items: '.caption',
tooltipClass: 'tooltip',
content: function() {
return $(this).data('caption');
},
position: {
my: 'left+15px center',
at: 'right center',
collision: 'flip'
},
show: false,
hide: false
});
}.observes('controller.inactive', 'controller.contentText')
});
Controller: ProcessController
Monitor.ProcessController = Ember.ObjectController.extend({
contentText: function() {
var tooltipContent = '';
this.get('containers').forEach(function(container) {
// Do a lot of things to tooltipContent involving:
// container.get('name')
// container.get('text')
// container.get('size')
// container.get('nbUsers')
// The data-bindattr value refreshes correctly so I cut this out for readability.
return tooltipContent;
}.property('name', 'containers.@each')
});
Edit 1:
Replaced 'containers.@each' by 'contentText' in the observer and added logging.
So it turns out my codes declares and initialize a tooltip, but once it's done, you can't change the content the same way. Plus it adds unneeded computing anyway.
Thanks to @GJK's answer and that question, I found out what was happening. Turns out you need to set the content of the tooltip to refresh it, not recreate it.
Here is the working code for Ember integration:
Monitor.ProcessView = Ember.View.extend({
// Other stuff
didInsertElement: function() {
this.initTooltip();
},
initTooltip: function() {
if (!this.$()) {return;}
if (this.get('controller').get('inactive')) {
this.$().tooltip({items: '.caption', disabled: true});
return;
}
this.$().tooltip({
items: '.caption',
tooltipClass: 'tooltip',
content: function() {
return $(this).data('caption');
},
position: {
my: 'left+15px center',
at: 'right center',
collision: 'flip'
},
show: false,
hide: false
});
},
updateTooltip: function() {
if (!this.$()) {return;}
if (this.get('controller').get('inactive')) {
this.$().tooltip({items: '.caption', disabled: true});
return;
}
content = this.get('controller').get('contentText');
this.$().tooltip("option", "content", content);
}.observes('controller.contentText')
});
As an added bonus, you can avoid using the data attribute as a buffer now, although I'm not sure why.
这篇关于Ember.js + JQuery-UI工具提示 - 工具提示不反映模型/控制器更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
