当ember-data加载完成并且元素被渲染时，应用JQuery效果 [英] Applying JQuery effect when ember-data has finished loading and element is rendered
本文介绍了当ember-data加载完成并且元素被渲染时，应用JQuery效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试在我的视图上使用didInsertElement，但是当视图呈现时触发，而不是在加载项目时触发。我也试图把一个观察者放在我的ArratController上来运行代码，当数组长度改变时（即当元素被添加到数组中时）这些东西都没有起作用。
任何想法？
我的JS代码：
var REVISION = 9;
//应用程序命名空间
var App = Ember.Application.create（{
ApplicationView：Ember.View.extend（{
templateName：'application'，
classNames：['application-view']
}），
ApplicationController：Ember.Controller.extend（），
RewardsView：Em.View.extend（{
templateName：'rewards'，
click：function（event）{
console.log（event）;
//window.location.href = event
}，
didInsertElement：function（）{
this。$（。draggable）。draggable（）;
}
}），
RewardsController：Em.ArrayController.extend（{
rewardAdded：function（）{
$（。draggable）。draggable（{
cursor：'move'，//设置游标apperance
revert：'invalid' //如果没有将item放入droppable
revertDuration：900，则返回该项目， //项目返回到其位置的持续时间
}）;
} .observes（'length'）
}），
ready：function（）{
console.log（Created App namespace）;
}，
路由器：Ember.Router.extend（{
goToRewards：Ember.Route.transitionTo（'root.rewards'），
root：Ember.Route.extend {
index：Ember.Route.extend（{
route：'/'，
}），
奖励：Ember.Route.extend（{
route： '/ rewards'，
输入：function（router）{
console.log（输入了奖励子状态）;
}，
connectOutlets：function路由器，上下文）{
router.get（'applicationController'）。connectOutlet（'content'，'rewards'，App.store.findAll（App.Rewards））;
}
} ），
}）
}）
}）;
App.Rewards = DS.Model.extend（{
provider：DS.attr（'string'），
name：DS.attr（'string'），
描述：DS.attr（'string'），
折扣：DS.attr（'string'），
img：DS.attr（'string'），
video： DS.attr（'string'），
价格：DS.attr（'string'），
available_quantity：DS.attr（'string'），
didLoad：function （）{
console.log（'model loaded'，this）;
}
}）;
App.store = DS.Store.create（{
revision：REVISION，
adapter：DS.DjangoTastypieAdapter.extend（{
serverDomain：http：/ /example.com，
命名空间：api / v1
}），
}）;
//开始！
App.initialize（）;
我的手柄模板：
{％handlebarsrewards％}
< div class =row-fluid>
< div class =span6>
< div class =box paint color_7>
< div class =title>
< div class =row-fluid>
< h4>可用的奖励< / h4>
< / div>
< / div>
<！ - 结束.title - >
< div class =content>
< div class =accordionid =accordion2>
{{#each reward in controller}}
< div class =draggable accordion-group>
{{#with reward}}
{{#if isLoaded}}
< div class =accordion-heading>
< a class =accordion-toggle collapseddata-toggle =collapsedata-parent =＃accordion2{{bindAttr href =reward.id}}> {{name}} {{id}}< / a>
< / div>
< div {{bindAttr id =reward.id}} class =accordion-body collapsestyle =height：0px;>
< div class =accordion-inner> {{description}}< / div>
< / div>
{{else}}
载入中...
{{/ if}}
{{/ with}}
< / div>
{{/ each}}
< / div>
< / div>
<！ - End .content - >
< / div>
<！ - 结束.box - >
< / div>
{％endhandlebars％}
解决方案
code> findQuery 而不是 findAll
router.get（ '的ApplicationController'）connectOutlet（ '内容'， '奖励'，App.store.findQuery（App.Rewards））;
您将获得属性 isLoaded 现在您可以添加 isLoaded 属性的观察者来运行所需的功能，如下所示
startDraggableFunctionality：function（）{
if（this.get（'content.isLoaded'）{
/ *你的代码到这里... * /
}
} .observes（'content.isLoaded'）
渲染后加载数据
在视图内添加以下方法如下
查看
//当视图完成渲染后，将执行此方法
afterRender：function（）{
this.get （'controller'）。set（viewRendered，true）;
}
控制器
viewRendered：false，//最初设置为false
startDraggableFunctionality：function（）{
if（this.get（'content.isLoaded'）&&& get（'viewRendered'））{
/ *你的代码到这里... * /
}
} .observes（'content.isLoaded'，'viewRendered'）
这样，如果视图在加载内容之前呈现， isLoaded make该功能将仅在数据加载后执行反之亦然
I have a list of items that I want to make draggable. I am using ember-data to get the items from my API and then render them in a view with an ArrayController. I can successfully load the items and render them but I don't know where or when to put the JQuery draggable function.
I have tried using didInsertElement on my view but this is triggered when the view is rendered and not when the items are loaded. I have also tried to put an observer on my ArratController to run the code when the array length changes (i.e when an element is added to the array) None of these things worked.
Any ideas?
My JS code:
var REVISION = 9;
// Application namespace
var App = Ember.Application.create({
ApplicationView: Ember.View.extend({
templateName: 'application',
classNames: ['application-view']
}),
ApplicationController: Ember.Controller.extend(),
RewardsView: Em.View.extend({
templateName: 'rewards',
click: function(event) {
console.log(event);
//window.location.href = event
},
didInsertElement: function() {
this.$(".draggable").draggable();
}
}),
RewardsController: Em.ArrayController.extend({
rewardAdded: function() {
$(".draggable").draggable({
cursor: 'move', // sets the cursor apperance
revert: 'invalid', // makes the item to return if it isn't placed into droppable
revertDuration: 900, // duration while the item returns to its place
});
}.observes('length')
}),
ready: function(){
console.log("Created App namespace");
},
Router: Ember.Router.extend({
goToRewards: Ember.Route.transitionTo('root.rewards'),
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
}),
rewards: Ember.Route.extend({
route: '/rewards',
enter: function ( router ){
console.log("The rewards sub-state was entered.");
},
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('content','rewards', App.store.findAll(App.Rewards));
}
}),
})
})
});
App.Rewards = DS.Model.extend({
provider: DS.attr('string'),
name: DS.attr('string'),
description: DS.attr('string'),
discount: DS.attr('string'),
img: DS.attr('string'),
video: DS.attr('string'),
price: DS.attr('string'),
available_quantity: DS.attr('string'),
didLoad: function() {
console.log('model loaded', this);
}
});
App.store = DS.Store.create({
revision: REVISION,
adapter: DS.DjangoTastypieAdapter.extend({
serverDomain: "http://example.com",
namespace: "api/v1"
}),
});
// Start!
App.initialize();
My handlebars template:
{% handlebars "rewards" %}
<div class="row-fluid">
<div class="span6">
<div class="box paint color_7">
<div class="title">
<div class="row-fluid">
<h4> Available Rewards </h4>
</div>
</div>
<!-- End .title -->
<div class="content">
<div class="accordion" id="accordion2">
{{#each reward in controller}}
<div class="draggable accordion-group">
{{#with reward}}
{{#if isLoaded}}
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="reward.id"}}> {{name}} {{id}} </a>
</div>
<div {{bindAttr id="reward.id"}} class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner"> {{description}} </div>
</div>
{{else}}
Loading...
{{/if}}
{{/with}}
</div>
{{/each}}
</div>
</div>
<!-- End .content -->
</div>
<!-- End .box -->
</div>
{% endhandlebars%}
解决方案
use findQuery instead of findAll
router.get('applicationController').connectOutlet('content','rewards',App.store.findQuery(App.Rewards));
You get the property isLoaded for the content, now you can add observer on isLoaded property to run your required functionality as follows
startDraggableFunctionality: function(){
if(this.get('content.isLoaded'){
/*Your code goes here...*/
}
}.observes('content.isLoaded')
After Rendering + Data loaded
Inside the view add the following method as follows
View
//This method will be executed when the view has finished rendering
afterRender: function(){
this.get('controller').set("viewRendered", true);
}
Controller
viewRendered: false, //set it to false initially
startDraggableFunctionality: function(){
if(this.get('content.isLoaded') && this.get('viewRendered')){
/*Your code goes here...*/
}
}.observes('content.isLoaded', 'viewRendered')
This way if the view renders before loading content, isLoaded make sures that function will be executed only after data has been loaded & vice-versa
这篇关于当ember-data加载完成并且元素被渲染时，应用JQuery效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
