如何在 Backbone.js 中刷新视图/模板答案

【问题标题】：How to refresh a view/template in Backbone.js如何在 Backbone.js 中刷新视图/模板
【发布时间】：2023-04-10 07:57:02
【问题描述】：

我遇到了一个问题。我的CommentinfoModel 正在从服务器获取数据，我能够在视图中显示所有数据。我使用另一个PostwallModel 在同一视图中发布数据。

当我发布数据时，我收到了来自服务器的响应，但该数据没有出现在模板中。当我转到另一个页面并返回时，会出现新发布的数据。我的帖子操作完成后如何刷新。这是我的代码：

var myPostwallView = Backbone.View.extend({
    el: $("#content"),
    events: {
        'click #postinwall': 'postmessage',

    },
    initialize: function () {
        var that = this;

        var options = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var onDataHandler = function (collection) {
            that.render();
        }

        var onErrorHandler = function (collection) {
            var errorstring = JSON.stringify(collection);
            console.log(errorstring);
        }

        this.model = new CommentinfoModel(options);
        this.model.fetch({
            success: onDataHandler,
            error: onErrorHandler,
            dataType: "json"
        });
    },

    render: function () {
        $('.nav li').removeClass('active');
        $('.nav li a[href="' + window.location.hash + '"]').parent().addClass('active');

        var data = {
            cinfo: this.model.toJSON(),
            _: _
        };

        var compiledTemplate = _.template(PostwallTemplate, {
            data: data
        });
        this.$el.html(compiledTemplate);
    },

    // Posting message action
    postmessage: function (e) {
        var optionsp = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var postmsg = $('#txt').val();
        var obj = new PostwallModel(optionsp);
        obj.save({
            uid: uni_id,
            chaid: currentChallenge['id'],
            post: postmsg
        }, {
            success: function (obj, response) {
                console.log(response.responseText, console.log(response);
                alert(response.message));
            }
        });

        e.preventDefault();
        $('#txt').val("");
    }
});

return myPostwallView;

【问题讨论】：

介意重新格式化您的代码以使其可读吗？

标签： javascript jquery backbone.js backbone-views

【解决方案1】：

当 GET 或 POST 等主干操作完成时，模型将触发一个同步事件，您可以在视图上收听该事件并调用您的渲染函数。该代码看起来像这样，可以放在您的视图初始化方法中：

this.listenTo(this.model, 'sync', this.render);

【讨论】：

我不明白你的意思。你能检查我的代码并告诉我需要更改的地方以及需要在代码中添加的内容吗？ @格里芬
var that = this ;我已经在我的代码中添加了看看我的初始化乐趣。
不，我的意思是放置这一行：this.listenTo(this.model, 'sync', this.render);在那之后 var that=this;行

【解决方案2】：

// Posting message action
    postmessage: function (e) {
        var optionsp = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var postmsg = $('#txt').val();
        var obj = new PostwallModel(optionsp);
        obj.save({
            uid: uni_id,
            chaid: currentChallenge['id'],
            post: postmsg
        }, {
            success: function (obj, response) {
                console.log(response.responseText, console.log(response);
                alert(response.message),that.initialize());  
            }
        });

        e.preventDefault();
        $('#txt').val("");
    }

【讨论】：