Question

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

我已经尝试在我的视图上使用didInsertElement，但是在呈现视图时触发，而不是在加载项目时触发。我还试图在我的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 "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

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

这样，如果视图在加载内容之前呈现，isLoaded确保只有在加载数据后才会执行该功能。反之亦然

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

1 个答案: