2

我在位于视图后面的模型save()上destroy()调用了方法，当它们成功或失败时，它们都会在视图/模板中显示某种 UI 更改（或“通知”）；也许它是成功保存的绿色复选标记，删除失败的红色 X 等。

但是，这些save()和destroy()方法也可以直接通过render()调用或在成功保存或删除时通过模型上更改的属性间接重新渲染视图。

当然，重新渲染会清除这些 UI 通知，本质上是将 View 重置为其“中性”的预保存/删除状态。

是否有一种被广泛接受的方式来通过重新渲染来持久化这类 UI 通知？或者，有没有办法部分渲染视图/模板也可以解决这个问题？

4

2 回答 2

2

状态可以是模型的一个属性，它会在重新渲染后反映在模板中，例如在您的视图模板中，例如：

<div class="notification notification-<%= status %>>
   <%= getStatusMessage(status) %> (Or whatever, you get the idea, perhaps
                                    status itself is an object with a message)
</div>

通过这种方式，状态消息将被烘焙到相同的重新渲染逻辑中。

model.set("status", "error"); // re-render with error message
model.set("status", "success"); // re-render with success message

或者，视图可能会维护自己的通知。假设视图保留了一个通知，您可能会执行以下操作：

var MyView = Backbone.View.extend({
  notify: function (message, status) {
    this.notification = {message: message, status: status};
    this.render();
  },

  // and when rendering the template, just merge it into the data
  render: function () {
    var html = myTemplate({notification: this.notification, ...});
    //...
  }
});

在模板中：

<% if ("undefined" !== typeof notification) { %>
  <div class="notification notification-<%= notification.status %>>
    <%= notification.message %>
  </div>
<% }; %>

回到你的代码中，例如：

model.save({
  success: function () { view.notify(someMessage, "success") },
  error: function () { view.notify(someMessage, "error") }
});
于 2013-04-30T22:49:25.773 回答
1

在我看来，这更多的是你的render()逻辑问题。如果在渲染视图时，状态消息应该持续存在，那么您的渲染方法不应该影响该 div。

显然，这在 DOM 和您的视图属性中可能会有些混乱$el，但您可能会想要这样的东西。

看法

notificationDiv : null,
contentDiv : null,

initialize : function() {
    // set up your notification and content divs here
    this.$el.append(this.notificationDiv).append(this.contentDiv);
}, 

render : function() {
    // have render only affect the content div, maybe something like this
    this.contentDiv.html( howeverYouWantToTemplate({content}) );
},

setStatus : function(status) {
    this.notificationDiv.text(status);
}
于 2013-04-30T23:16:01.733 回答