javascript - Backbone Marionette - 根据传入数据更新 View 对象

Question

我有一个应用程序，它根据实时传入的 iq 数据包更新到 pubsub 节点。

目前，当我收到请求的响应时，我正在使用主干 Marionette 来创建初始 View 。这将使用模板创建一个对象，然后我需要将实时数据输入到该对象中。

我想使用主干 Marionette 来用实时数据更新这个对象，但我不确定如何完成。

目前，当我收到 pubsub 节点的正确类型的 iq 时，我将获取所需的信息，然后调用函数“updatewell”，该函数根据原始响应更新由主干创建的对象。

backbone 是否能够通过 pubsub 事件更新此对象？我该怎么调用它？

下面的编辑大致显示了我在 updatewell 函数中所做的操作。 Backbone 傀儡能应付这一切吗？这并不像“用新数据替换模板”那么简单，我需要根据返回的内容隐藏/显示信息。

我使用主干 Marionette 的主要问题是它不断创建新对象。在 updatewell 代码中，您注意到我使用唯一的 ID 定义 div，并根据该 id 进行更新(在 IQ 中返回到 pubsub)。这意味着正确的对象总是会更新，这是我在主干 Marionette 中找不到定义的东西。

本质上，我需要告诉 Marionette :“这些是一组新值，具有该值的模型是否存在？如果不存在，则创建它，如果存在，则用其他模型更新它值(value)观”

请询问更多信息。

我的代码如下(截至 2014 年 5 月 1 日简化):

Backbone Marionette 代码:

InfoWell = Backbone.Model.extend({});

InfoWells = Backbone.Collection.extend({
    model : InfoWell
});

InfoWellView = Backbone.Marionette.ItemView.extend({
    template : "#template-infowell",
    tagName : 'div',
    className : 'alert alert-custom',

initialize: function () {
    this.$el.prop("id", this.model.get("datetime"));
},
});

InfoWellsView = Backbone.Marionette.CompositeView.extend({
    tagName : "div",
    id : "info-well-list",
    template : "#template-infowells",
    itemView : InfoWellView,

});

MainJs.addInitializer(function(options) {
    var aInfoWellsView = new InfoWellsView({
        collection : options.InfoWells
    });
    MainJs.InfoWellsContainer.show(aInfoWellsView);
});

var InfoWells = new InfoWells();

创建良好的响应代码:

    InfoWells.add(new InfoWell({
        id : datetime,
        datetime : datetime,
        title : title,
        body : body,
        comments : comments
    }));

发布订阅代码:

pubsubHandlerInfo = function(iq) {
    var date = $(iq).find('datetime').get()
    ...     
    MainJs.vent.trigger("updatewell", {
        datetime : datetime,
        title : title,
        body : body,
        comments : comments
    });
    return true;
}

编辑更新井功能:

MainJs.vent.bind("updatewell", function(data) {
        var datetime = data.datetime;

        if (datetime.length) {
            $("#hidden-state").trigger('testactions');
            $('#hidden-state').bind('testactions', updateWell(data))
        }

        function updateWell(data) {

        $("#body-" + data.datetime).html(data.body);
        $("#comments-" + data.datetime).html(data.comments);

        if (data.title === "something1") {
            $("#"+data.datetime+"-Something1").unbind('click').click(something1Action)
        } else if (data.title === "something2") {
            $("#"+data.datetime+"-Something2").unbind('click').click(something2Action)
        }

        function something1Action() {MainJs.function1();}
        function something2Action() {MainJs.function2();}
    });

所以用语言来说，我想做的是:将 MainJs.vent.trigger("updatewell", { 替换为 InfoWells.add(new InfoWell({) 以将新模型发送到主干。主干将看到此模型并检查如果已经存在具有日期时间值 ID 的模型。

第一步，如果有一个具有此 ID 的模型，我需要使用发送的新值更新模型中的两个 div(正文和评论)。如果没有具有此 ID 的模型，我需要照常创建一个模型(目前有效)。

第二步，我需要检查标题的值并为标题 div 创建一个点击函数。

非常感谢您提供的任何帮助。

编辑:正如 Dmytro 所提到的，我可以使用 set 和 get，但我不确定这在这里如何应用。我在哪里告诉它获取现有 ID 以及如何为其设置新值？任何与此相关的文档链接都非常好。

解决方案:因此，了解 get 和 set 以及在哪里应用它是更新 Backbone 模型的主要部分。

下面是我添加到 pubsub 处理程序中的代码，它可以正确执行此操作。

    var update = InfoWells.get(datetime);
    console.log(update);
    if (update !== undefined && update !== null){
        update.set({
title : title,
body : body,
comments : comments
        });
    };

对于那些想知道我在做什么的人来说。我创建了一个名为 update 的变量，它通过查看集合 (InfoWells) 并获取具有值 datetime 的 ID 来获取其值，从上面您可以看到这是唯一的 ID我为每个模型分配的值。

然后我检查这个更新值是否确实存在，如果存在，我调用 set 命令，该命令告诉它将这些新值发送到模型中提到的属性。请注意，我遗漏了 id，因为我永远不会更新模型的 ID。

然后，正如 Dmytro 提到的，当模型更改时，我将渲染添加到 ItemView。

    modelEvents: {
        "change": "render"
    }

为了很好地复制我的更新，我的下一步是使用"change:ATTRIBUTE": function()。

感谢您的帮助。

Answer 1

首先，Backbone.Model 应表示数据的当前状态，并且 View 应将其呈现为 HTML。直接更新 HTML 这不是 Marionette 的方式。

如果您不想创建新模型，但在收到有关现有模型的数据时退出更新，您可以在集合中查找现有模型(使用，get或find或 findWhere)并使用 set 使用新属性更新它。

如果某些属性发生更改，您的模型中将触发 change 事件。您可以监听此事件并使用 modelEvents 重新呈现您的 View :

InfoWellView = Backbone.Marionette.ItemView.extend({
    template : "#template-infowell",
    tagName : 'div',
    className : 'alert alert-custom',
    modelEvents: {
      'change': 'render'
    }
});