ember.js - 当 ember-data 完成加载并呈现元素时应用 JQuery 效果

Question

我有一个想要使其可拖动的项目列表。我使用 ember-data 从 API 获取项目，然后使用 ArrayController 将它们呈现在 View 中。我可以成功加载项目并渲染它们，但我不知道在哪里或何时放置 JQuery 可拖动函数。

我尝试在 View 上使用 didInsertElement 但这是在渲染 View 时触发的，而不是在加载项目时触发的。我还尝试在 ArratController 上放置一个观察者，以便在数组长度发生变化时(即，将元素添加到数组中时)运行代码，但这些都不起作用。

有什么想法吗？

我的JS代码:

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

我的 Handlebars 模板:

{% 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%}

Answer 1

使用findQuery而不是findAll

router.get('applicationController').connectOutlet('content','rewards',App.store.findQuery(App.Rewards));

您获得了内容的属性 isLoaded，现在您可以在 isLoaded 属性上添加观察者来运行您所需的功能，如下所示

startDraggableFunctionality: function(){
  if(this.get('content.isLoaded'){
    /*Your code goes here...*/
  }
}.observes('content.isLoaded')

渲染+数据加载后
在 View 内部添加如下方法

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')

这样，如果 View 在加载内容之前渲染，isLoaded 确保该函数仅在数据加载后执行，反之亦然