Question

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

enter image description here

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

我读到了updateModel，它需要一个真值来确认模型更新。但是，我的编辑视图[取消 - 事件]如何触发 错误值 到 updateModel函数 ，所以模型不会使用textfield值更新。

我需要像全局变量这样的东西吗？

//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

Try Backbone.Stickit's sister project: Backbone.trackit

Answer 2

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

    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();
        });
    }

如果您有解决方案不需要从服务器获取数据以通过backbone.stickit恢复模型更改，请发回答案

更新 - 基于杰克建议的第二个解决方案 - 无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 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>

因此模型属性仅在提交时才会更改。

骨干贴 - 恢复模型的变化

3 个答案: