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 时，视图知道内容已加载并且可以实例化jPages，请参见http://jsfiddle.net/pangratz666/dpqCn/：

车把：

<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 回答