Javascript Etch.js与Backbone.marionete.js的集成

有人曾经在Backbone.marionete.js应用程序中集成过Etch.js吗

我在绑定保存事件时遇到问题。这是我的木偶视图的代码：

MyApp.module('Views', function(Views, App, Backbone, Marionette, $, _) {

    Views.DetailsView = Marionette.ItemView.extend({

        template: '#details',

        initialize: function(options) {
            _.bindAll(this.model, 'save'); // I think the problem is related to the binding
            this.model.bind('save', this.model.save);
        },

        events: {
            'mousedown .editable': 'editableClick'
        },

        editableClick: etch.editableInit
    });
});

在我的模板中，我有如下内容：

<div id="detail-expanded">
     <p>Description: <span class="editable">{{ description }}</span></p>
</div>

描述：{{Description}}

插件加载正确，如果我点击字段，我可以看到蚀刻按钮栏，我可以编辑元素的内容，使其可编辑，如果我点击保存按钮，我实际上能够触发model save（）方法

问题是提交的模型是原始模型，没有我对字段所做的编辑。我认为这是一个约束问题，有什么想法吗

---

像往常一样，提前谢谢你

我相信你想要的是

_.bindAll(this, 'save');

而不是

_.bindAll(this.model, 'save');

---

我相信你想要的是

_.bindAll(this, 'save');

而不是

_.bindAll(this.model, 'save');

---

所以，这里的问题并不是真的与木偶有关，而是蚀刻不能处理将数据从可编辑字段移动到模型的问题。我应该在文件中更明确地说明这一点。您要做的是在视图上创建一个save函数，它可以为您这样做：

Views.DetailsView = Marionette.ItemView.extend({

    template: '#details',

    initialize: function(options) {
        _.bindAll(this, 'save');
        this.model.bind('save', this.save);
    },

    events: {
        'mousedown .editable': 'editableClick'
    },

    editableClick: etch.editableInit,

    save: function() {
      // populate model attrs from dom
      var title = this.$('.title').text();
      var body = this.$('.body').text();


      this.model.save({title: title, body: body});
    }
});

---

很抱歉给你带来了困惑。我可以看出文档在这方面是如何误导的。

因此，这里的问题实际上与木偶无关，而是etch无法处理将数据从可编辑字段移动到模型的过程。我应该在文件中更明确地说明这一点。您要做的是在视图上创建一个save函数，它可以为您这样做：

Views.DetailsView = Marionette.ItemView.extend({

    template: '#details',

    initialize: function(options) {
        _.bindAll(this, 'save');
        this.model.bind('save', this.save);
    },

    events: {
        'mousedown .editable': 'editableClick'
    },

    editableClick: etch.editableInit,

    save: function() {
      // populate model attrs from dom
      var title = this.$('.title').text();
      var body = this.$('.body').text();


      this.model.save({title: title, body: body});
    }
});

---

很抱歉给你带来了困惑。我可以看出这些文件在这方面有多么误导人。

非常感谢，它对我很有用！：）我认为这种混乱是由于重复的“保存”名称造成的。可能视图函数的另一个名称（例如applyChanges）会让事情变得更清楚。再次干杯。非常感谢，这对我很有用！：）我认为这种混乱是由于重复的“保存”名称造成的。可能视图函数的另一个名称（例如applyChanges）会让事情变得更清楚。再次干杯。你是对的，但这样做是不够的，因为它缺少视图中的保存功能。看看joshontheweb的答案。无论如何，谢谢：）你说得对，但这样做是不够的，因为它缺少视图中的保存功能。看看joshontheweb的答案。无论如何，谢谢你：）