1

jPagesをEmberJSで動作させようとしています。jPagesは、Ajax呼び出しのために時間内にロードされない要素にバインドしようとしているようです。誰かがこれを機能させましたか？これがjsfiddleです：http：//jsfiddle.net/stevenng/8hDRJ/33/

ハンドルバー：

<div class="songs">
    <script type="text/x-handlebars">
    {{#view Songs.songsView}}
        <div id="song-items">
        {{#each Songs.songsController}}
            <div class="song">
                <p>{{artist}}</p>                  
            </div>
        {{/each}}
        </div>
        <div class="pagination"></div>
    {{/view}}
    </script>
</div>​

JavaScript

Songs.songsController = Em.ArrayController.create({
    content: [],
    addSong: function(song) {
        this.pushObject(song);
    },
    getSongs: function() {
        var self = this;
        $.ajax({
            url: 'http://test.com/getSongs?callback=?',
            dataType: "jsonp",
            success: function(data){
              var obj = $.parseJSON(data);
              for (var i=0; i<obj.songs.length; i++) {
                self.addSong( Songs.song.create( obj.songs[i]) );    
              }
            }
        });
    }
});

Songs.songsView= Em.View.extend({
    didInsertElement: function() {
      $('.pagination').jPages({
        containerID: "song-items",
        perPage: 2
      });  
    }
});
4

1 に答える 1

1

jPagesあなたが言ったように、プラグインをインスタンス化するとき、曲の要素はまだDOMにありません。それが機能していない理由です。

loaded私の解決策は、コントローラーにプロパティを作成することです。trueに設定すると、ビューはコンテンツがロードされていることを認識し、インスタンス化できます。http ：//jsfiddle.net/pangratz666/dpqCn/jPagesを参照してください。

ハンドルバー：

<script type="text/x-handlebars" data-template-name="song" >
    {{content.artist}}
</script>​

JavaScript：

Songs.songsController = Em.ArrayController.create({
    content: [],
    getSongs: function() {
        var self = this;
        $.ajax({
            success: function(data) {
                var songs = data.songs.forEach(function(song){
                    return Songs.Song.create(song);
                });

                // add all songs at once
                self.pushObjects(songs);

                // set the loaded property to true to indicate that the content is filled
                self.set('loaded', true);
            }
        });
    }
});

Songs.SongsView = Ember.ContainerView.extend({
    childViews: 'songsView paginationView'.w(),
    loadedBinding: 'controller.loaded',

    // invoked when the loaded property of the controller is changed
    _loadedChanged: function() {
        if (this.get('loaded')) {
            // get the songsView instance
            var songsView = this.get('songsView');

            // call jPages plugin on next run loop
            // when content has been filled and elements have been inserted to DOM
            Ember.run.next(this, function() {
                this.$('.holder').jPages({
                    containerID: songsView.get('elementId')
                });
            });
        }
    }.observes('loaded'),

    paginationView: Ember.View.create({
        classNames: 'holder'.w()
    }),

    songsView: Ember.CollectionView.create({
        contentBinding: 'parentView.controller.content',
        tagName: 'ul',
        itemViewClass: Ember.View.extend({
            templateName: 'song'
        })
    })
});

別の注意：命名規則はEmberに準拠していません。Emberistによるブログ投稿を参照してください。つまり、クラスはUpperCaseであり、プロパティとインスタンスはlowerCaseです。

于 2012-05-26T10:04:26.627 に答える