Question

我有一个包含代表应用导航项的模型的集合。在我的应用程序中，导航位于屏幕的左侧，我希望能够在渲染时逐个滑动导航项目。导航容器是Collection View，导航项是项目视图。

在收藏视图中，我已将 appendHtml 方法更改为如下所示。

    appendHtml: function (collectionView, itemView, index) {
            console.log('APPENDING ITEM VIEW', itemView.el);
            itemView.assignNewlyCreated();
            collectionView.$el.append(itemView.el);
            itemView.slideIn();
    },

项目视图具有以下相关方法：

    // Label the dom element as newly created
    assignNewlyCreated: function () {
        this.$el.addClass('newly-created');
    },

    // Slide in the item.
    slideIn: function () {
        console.log('sliding in element', this.el);
        this.$el.animate({left: 0});
    }

由于新创建的类具有将项目从屏幕推向左侧的样式，我想如果我像这样追加它然后将它滑入DOM中的一次，它应该工作。不幸的是，这不起作用，并且导航项已经出现在屏幕上而没有动画。我在这里做错了什么，有谁知道为什么这似乎不起作用？我想我的应用程序的另一部分可能存在错误，但如果是这种情况并且如果已修复，那么上述代码是否有效？

Answer 1

也许尝试这样的事情：

MyItemView = Backbone.Marionette.extend({
  template: "#template",
  className: "newly-created",
  onRender: function(){
    this.$el.animate({left: 0});
  }
});

这会直接在项目上设置类，然后在项目视图中将项目视图滑动到由CollectionView呈现时（onRender会自动调用，如果已定义，则没有其他任何内容可供您使用）。

为渲染到Marionette集合视图中的项目设置动画

1 个答案: