无法理解模型更改时更新 UI 的过程

发布于 2024-12-05 07:13:05 字数 190 浏览 3 评论 0原文

我有一系列模型。当模型更改时,它会触发集合上的更改事件。我观察集合更改事件,然后更新 UI。

我应该如何更新 UI?我不需要知道哪些模型是新的,以便我可以追加,以及哪些模型已经存在,以便我可以更新吗?

我觉得需要这种粒度的原因之一是因为有一个动画过渡,所以我需要将每个模型与其之前的状态相关联。骨干网对此有帮助还是我应该自己构建这个?

I have a collection of models. When a model changes it triggers a change event on the collection. I watch for the collection change event and then I update the UI.

How should I go about updating the UI? Don't I need to know what models are new, so I can append, and what already exist, so I can update?

One of the reason I feel I need this granularity is because there's an animation transition, so I need to relate every model to it's previous state. Does backbone help with this or should I just build this on my own?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不打扰别人 2024-12-12 07:13:05

要了解哪些型号是新的,请收听该系列的“添加”事件。然后您可以渲染单个项目。


MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    // render the new item here
  },

  render: function(){
    this.collection.each(this.renderItem);
  }
});

在此示例中,呈现集合的工作方式与呈现单个项目相同 - 它调用“add”事件调用的相同 renderItem 方法。

要处理有排序列表的情况...您必须在 renderItem 方法中执行一些逻辑来找出项目的位置。可能是这样的(未经测试的代码......只是一个想法):


MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    var itemView = new ItemView({model: item});
    itemView.render();
    return itemView;
  },

  render: function(){
    this.collection.each(function(item){
      var itemView = renderItem(item);
      var itemIndex = item.get("index");
      var previousItem = this.$(".myList")[itemIndex];
      $(itemView.el).insertAfter($(previousItem));
    });
  }
});

此代码假设您的模型上有一个索引属性,以了解模型应该采用的顺序。

另请注意,此代码获胜的可能性很高不按原样执行,因为我还没有对其进行测试。但它应该让您了解您想要编写的代码。

to know which models are new, listen to the collection's "add" event. then you can render the individual item.


MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    // render the new item here
  },

  render: function(){
    this.collection.each(this.renderItem);
  }
});

in this example, rendering the collection works the same as rendering an individual item - it calls the same renderItem method that the "add" event calls.

to handle the scenario where you have a sorted list... you'll have to do some logic in your renderItem method to figure out the location of the item. something like this maybe (untested code... just an idea):


MyView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "renderItem");
    this.collection.bind("add", this.renderItem);
  },

  renderItem: function(item){
    var itemView = new ItemView({model: item});
    itemView.render();
    return itemView;
  },

  render: function(){
    this.collection.each(function(item){
      var itemView = renderItem(item);
      var itemIndex = item.get("index");
      var previousItem = this.$(".myList")[itemIndex];
      $(itemView.el).insertAfter($(previousItem));
    });
  }
});

this code assumes you have an index attribute on your models to know the order that the models are supposed to be in.

also note that there's a high likelihood that this code won't execute as-is, since i haven't tested it out. but it should give you an idea of the code you'll want to write.

时间你老了 2024-12-12 07:13:05

如果模型发生变化,您无需遍历集合。简单地为每个模型渲染一个子视图,您可以在其中处理 change 事件。

想象一下您有以下结构:

Collection: Tasks
Model:      Task

和两个视图:

Tasks view  (main view)
Task view   (sub view)

在任务视图的 #render 方法中,您渲染例如一个

    元素,它将保存您的任务(子意见)。然后,您迭代所有集合的模型,并为每个模型创建一个任务视图,传递模型并将其 el 附加到您的主视图

      中。
      在任务视图中,您将#render 方法绑定到模型change 事件,每个任务视图都会自行处理。 ——我说得有道理吗?

You don't need to go through the collection if the model changes. Simple render a sub view for each model and in which you can handle the change event.

Imagine you have the following structure:

Collection: Tasks
Model:      Task

And two views:

Tasks view  (main view)
Task view   (sub view)

In the #render method of the Tasks view you render e.g. a <ul> element which will hold your tasks (sub views). Then you iterate through all your collection's models and create a Task view for each, passing the model and appending it's el to your main views <ul>.
Within your Task view you bind the #render method to the models change event and each Task view will take care of itself. — Am I making sense?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文