Marionette.CompositeView 和 Marionette.ItemView 之间的事件

Events between Marionette.CompositeView and Marionette.ItemView

本文关键字：Marionette 事件 之间 ItemView CompositeView      更新时间：2023-09-26

我有两个模块itemView.js和ListView.js。
当我获取数据时，一切正常。

问题是关于我更改相应模型时的item view（1）。

a） ListView.js （2） 显示模型closed值等于 false 的所有对象 （3）

b） （1） 中closeTask的动作改变了模型
的值从closed: false到closed: true

c） 当 b） 发生时没有任何变化，
但是如果我重新加载页面，我会得到正确的结果（不显示closed值等于 true 的模型）。

我应该如何解决这个问题？

（1）

// itemView.js
var itemView = Marionette.ItemView.extend({
    initialize: function () {
        this.model.on('change', this.render, this);
    },
    events: {
        'click #close': 'closeTask'
    },
    template: itemTemplate,
    tagName: 'li',
    closeTask: function () {
        if (!this.model.get('closed')) {
            this.model.save({
                closed: true
            });
        }
    }
});

（二）

// ListView.js
var ListView = Marionette.CompositeView.extend({
    template: listTemplate,
    itemView: itemView
});

（三）

// Collection
myCollection.attributes = [
    {
        id: 1,
        name: 'bar'
        closed: false
    },
    {
        id: 2,
        name: 'bar2'
        closed: false
    },
    ….
];

附言：

当我获取集合时，服务器只给我关闭属性等于 false 的模型。 

app.addInitializer(function () {
    myCollection = new MyCollection();
    myCollection.fetch();
});
我没有

使用木偶，但我一直在使用Backbone，我的想法是木偶没有刷新模板或类似的东西。

如果你尝试这个会发生什么？

// itemView.js
var itemView = Marionette.ItemView.extend({
    initialize: function () {
        this.model.on('change', this.render, this);
    },
    onRender : function(){
       //verify your model:
       console.log( this.model.toJSON() );
       if (this.model.get('closed')) {
          this.$el.fadeOut();//bye bye item
       }
    },
    events: {
        'click #close': 'closeTask'
    },
    template: itemTemplate,
    tagName: 'li',
    closeTask: function () {
        if (!this.model.get('closed')) {
            this.model.save({
                closed: true
            });
        }
    }
});
相关文章：