3

ドラッグ可能にしたいアイテムのリストがあります。私は 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%}
4

1 に答える 1

2

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

レンダリング後+データ
がビュー内にロードされた後、次のように次のメソッドを追加します

意見
//This method will be executed when the view has finished rendering
afterRender: function(){
  this.get('controller').set("viewRendered", true);
}

コントローラ
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される場合、データがロードされた後にのみ関数が実行されるようにし、その逆も同様です

于 2012-12-10T08:12:24.027 に答える