gpt4 book ai didi

backbone.js - 使用 Backbone.Marionette 在 CompositeView 上渲染事件之后

转载 作者:行者123 更新时间:2023-12-04 16:35:18 25 4
gpt4 key购买 nike

我有一个带有搜索面板和结果数据集合的 Marionette CompositeView。

我想在以下情况下调用函数:

  • 搜索面板已呈现。
  • 该集合尚未呈现。
  • 呈现集合时不应调用此函数。

  • 我是这样做的:(但是“afterRender”函数被调用了两次)
    // VIEW
    App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {
    this.bindTo(this,'render',this.afterRender);
    },

    afterRender: function () {
    //THIS IS EXECUTED TWICE...
    }

    });

    我怎样才能做到这一点?

    ==========================编辑====================== ============

    我是这样解决的,如果你有意见请告诉我。
    // VIEW
    App.MyComposite.View = Backbone.Marionette.CompositeView.extend({

    //INITIALIZE
    initialize: function() {
    //this.bindTo(this,'render',this.afterRender);
    this.firstRender = true;
    },

    onRender: function () {
    if (firstRender) {
    //DO STUFF HERE..............
    this.firstRender = false;

    }
    }

    });

    最佳答案

    Marionette 提供 onRender方法内置于它的所有 View 中,因此您可以摆脱 this.bindTo(this, 'render', this.afterRender)称呼:


    // VIEW
    App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {
    // this.bindTo(this,'render',this.afterRender); // <-- not needed
    },

    onRender: function () {
    // do stuff after it renders, here
    }

    });

    但是为了让它在集合未呈现时不执行工作,您必须向 onRender 方法添加逻辑以检查集合是否已呈现。

    这在很大程度上取决于当集合中没有呈现任何项目时,您尝试对呈现进行什么操作。

    例如...如果您想呈现“未找到项目”消息,您可以使用内置 emptyView复合 View 的配置。

    NoItemsFoundView = ItemView.extend({
    // ...
    });

    CompositeView.extend({

    emptyView: NoItemsFoundView

    });

    但是,如果您有一些特殊的代码需要运行并执行此选项未涵盖的某些事情,那么您将不得不放入一些您自己的逻辑。

    CompositeView.extend({

    onRender: function(){
    if (this.collection && this.collection.length === 0) {
    // do stuff here because the collection was not rendered
    }
    }

    });

    关于backbone.js - 使用 Backbone.Marionette 在 CompositeView 上渲染事件之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12206235/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com