backbone stickit - 还原模型更改

Question

我现在正在测试 backbone stickit 的双向数据绑定。有没有办法恢复更改，例如，在通过表单编辑模型数据时，用户按下取消按钮，如下图

当我们在表格中输入时，模型似乎被动态更改了。我想要的是当用户按下取消按钮时，模型将恢复为原始值。

我读到 updateModel 需要一个真值来确认模型更新。但是，我的编辑视图 [cancel-event] 如何触发 false value 到 updateModel 函数，这样模型就不会用文本字段值更新。

我需要全局变量之类的东西吗？

//global variable
var updateModelTitle = true;

//backbone stickit bindings
  bindings: {
    '#title': {
      observe: 'title',
      updateModel: 'confirmUpdate'
    }
  },
  confirmUpdate: function(val, event, options) {
    return updateModelTitle;
  }

//cancel button event click event
updateModelTitle = false;

在此先感谢您的帮助。

Answer 1

这是我解决这个问题的方法。我不想在 backbone stickit 配置中做任何事情。如果用户单击取消按钮，我所做的是使用模型 ID 并从 restful 服务器获取原始数据。然后使用来自服务器的数据通过 stickit 2 方式绑定恢复模型更改。

    canceledit: function() {
        var modelIndex = this.model.get('index');
        var modelId = this.model.get('id');

        this.$el.fadeOut(500, function() {

            var fetchTask = new App.Models.Task({ id: modelId });

            fetchTask.fetch({
                wait: true,
                success: function(model, response, options) {
                    var title = model.get("title");
                    var task = App.Collections.tasksCollection.at(modelIndex);
                    task.set({title : title});
                },
                error: function(model, response, options) {
                    console.log('An error occured while fetching the data...');
                }
            });

            this.remove();
        });
    }

请 post 如果您有不需要从服务器获取数据来恢复模型更改的解决方案 backbone.stickit

请回答

更新 - 基于 Jack 建议的第二个解决方案 - 没有 REST 调用

//create global variable for model collection index and title properties
App.Global.modelTaskCurrentTitle = "";
App.Global.modelTaskIndex = -1;

//in edit view render function
//capture info needed
App.Global.modelTaskIndex = this.model.get('index');
App.Global.modelTaskCurrentTitle = this.model.get('title');

//in cancel function for edit-view
//or any view that need to remove edit-view to prevent zombie-edit-view
//and also reverting model changes by stickit in edit-view

//revert stickit changes
var task = App.Collections.tasksCollection.at(App.Global.modelTaskIndex);
task.set({title : App.Global.modelTaskCurrentTitle});

//remove edit view
App.Views.editTaskView.remove();

Answer 2

尝试 Backbone.Stickit 的姊妹项目：Backbone.trackit

Answer 3

我会用

bindings: {
  '#title': {
    observe: 'title',
    event: ['change']
    updateModel: function(val, event, options) {
      if (val)
        return val;
    }
  }
}

<form>
<input id="title" type="text">
<button type="Cancel" data-action="destroy-view">
<button type="submit">OK</button>
</form>

所以模型属性只会在提交时改变。

backbone stickit - 还原模型更改

backbone stickit - reverting model changes

javascript

2-way-object-databinding

backbone.js