当底层模型如何变化动态更新木偶的CollectionView [英] How to dynamically update a Marionette CollectionView when the underlying model changes

问题描述

好像这应该是显而易见的，但似乎有出有这么多不同的例子，其中大部分会导致错误对我来说，让我觉得他们都过时了。基本情况是，我有一个链接到延伸ItemView控件，MessageCollection链接到MessageCollectionView（ItemView控件：消息查看）消息查看一个MessageModel。我在该MessageCollection是异步填充一个比较特殊的情况，因此，当页面首次呈现，它是空的，将显示加载图标。也许我有结构不正确的事（见<一href=\"http://stackoverflow.com/questions/18625203/overriding-fetch-in-marionette-js-model-and-responding-to-push-updates\">here对于历史），但现在，我已经封装在code，它向服务器初始请求并接收在MessageCollection对象，这样它本身更新消息的初步名单。不过，我不太清楚，因为这一点，如何触发显示视图。很显然，该模型不应该告诉渲染视图，但没有我尝试创建一个视图，并让它侦听modelChange事件，并称之为渲染工作过。

Seems like this should be obvious, but there seem to be so many different examples out there, most of which cause errors for me, making me think they are out of date. The basic situation is that I have a MessageModel linked to a MessageView which extends ItemView, MessageCollection linked to a MessageCollectionView (itemView: MessageView). I have a slightly unusual scenario in that the MessageCollection is populated asynchronously, so when the page first renders, it is empty and a "Loading" icon would be displayed. Maybe I have things structured incorrectly (see here for the history), but right now, I've encapsulated the code that makes the initial request to the server and receives the initial list of messages in the MessageCollection object such that it updates itself. However, I'm not clear, given this, how to trigger displaying the view. Obviously, the model shouldn't tell the view to render, but none of my attempts to instantiate a view and have it listen for modelChange events and call "render" have worked.

我曾尝试：

1. 没有装载元素，只显示与负载无元素的CollectionView，但它不会刷新底层集合刷新后。


2. 添加modelEvents {'变'：'渲染'}到视图 - >未捕获类型错误：目标函数（）{返回parent.apply（这一点，参数）; }有'对'都没法


3. 我也试过this.bindTo（this.collection ..）但这，没有一个中堂方法bindTo


4. 最后，我试过了，在view.initialize：_.bindAll（本）; this.model.on（变化：this.render）; - >未捕获类型错误：目标函数（）{[本地code]}有'对'都没法

下面是code

    Entities.MessageCollection = Backbone.Collection.extend({
        defaults: {
            questionId: null
        },
        model: Entities.Message,
        initialize: function (models, options) {
            options || (options = {});
            if (options.title) {
                this.title = options.title;
            }
            if (options.id) {
                this.questionId = options.id;
            }
        },
        subscribe: function () {
            var self = this; //needed for proper scope
            QaApp.Lightstreamer.Do('subscribeUpdate', {
                adapterName: 'QaAdapter',
                parameterValue: this.questionId,
                otherStuff: 'otherstuff',
                onUpdate: function (data, options) {
                    console.log("calling sync");
                    var obj = JSON.parse(data.jsonString);
                    self.set(obj.Messages, options);
                    self.trigger('sync', self, obj.Messages, options);
                }
            });
        },
    });

    Views.MessageCollectionView = Backbone.Marionette.CollectionView.extend({
        itemView: Views.MessageView,
        tagName: 'ul',
//        modelEvents: {
//            'change': 'render'
//        },
        onAfterItemAdded: function (itemView) {
            this.$el.append(itemView.el);
        }
    });

var Api = {
        subscribe: function (id) {
            var question = new QaApp.Entities.Question(null, { id: id });
            question.subscribe();
            var questionView = new QaApp.Views.QuestionView(question);
            QaApp.page.show(questionView);
        }
    };

我为人人，我已经收到，并感谢提前寻找帮助非常感激。

I am very grateful for all the help I've received already and thanks in advance for looking.

推荐答案

试试这个：

var questionView = new QaApp.Views.QuestionView({
    collection: question
});

这篇关于当底层模型如何变化动态更新木偶的CollectionView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！