检测主干模型更改以启用表单的保存按钮并更新模型 [英] detecting backbone model changes to enable save button of form and update model

问题描述

我的简单表单模板就是这样

MY simple form template is like this

<script type="text/template" id="template">
<form id="myForm " >
<fieldset>
    <label>Name</label>
    <input type="text" id="name" name="name" />
    <label>Age</label>
    <input type="text" id="age" name="age" />
            <input type="hidden" id="id" name="id"/>
</fieldset>
<a id="save" disabled >Save Changes</a>

我的bakbone视图如下:

My bakbone view is as follows:

myView = Backbone.View.extend({
template: _.template( $("#template").html() ),
events: {
   "click #save" : "save",
},
bindings: {
        '#id': 'id',
        '#name': 'name',
        '#age': 'age'
},
initialize: function () {
    if(this.model){
        this.model.fetch();
    } 
    this.listenTo(this.model, 'all', this.render);
},
render: function () {           
    this.$el.html( this.template );
            this.stickit(); //used library http://nytimes.github.io/backbone.stickit/
},
save: function() {
    //how to do following
    //save model
    //if success, reset form to new value
    //if error, do not reset form and alert there is error in saving
}

}

我的视图从这里初始化

RegionManager.show(new app.myView({
 model : new app.myModel(
 {id: 1})
}));

在这里，我的表单成功显示了带有姓名和年龄的表单.它们显示如下 已禁用保存的表单.此处表单已禁用.现在，当用户更改任何值时，它应立即检测并应启用保存按钮，并且外观应如下所示:已启用表单保存.用户将y附加到mickey后，将立即启用保存功能.现在，当用户单击保存"时，如果保存成功，则应保存它，否则它将警告错误.如果成功，它应该显示更新的表单.

Here my form successfully display form with name and and age feild. They appear as shown in form with save disabled. Here form is disabled. Now, when user changes any value, it should detect immediately and save button should be enabled and should look like this form save enabled. Here save is enabled as soon as user append y to mickey. Now, when user click save, it should be save if successful else it should alert error. if successful, it should show updated form.

我刚接触骨干，并试图找出以上两种解决方案.

I am new to backbone and trying to figure out above two solutions.

推荐答案

一旦对表单进行了任何更改，stickit将更新模型，从而触发更改事件.您可以在initialize中设置一个侦听器以启用保存:

As soon as any change has been made to the form, stickit will update the model which will trigger change events. You can setup a listener in initialize to enable save:

this.listenTo(this.model, 'change', function() { this.$('#save').prop('disabled', false); });

在保存中，您可以使用任何jQuery ajax回调和属性，因此您需要执行以下操作:

In save, you can use any of the jQuery ajax callbacks and properties, so you'll want to do something like the following:

save: function() {
    if (!this.$('#save').prop('disabled')) {
        this.model.save({
            success: function() {
                // You don't really need to do anything here. If the model was changed in the
                // save process, then stickit will sync those changes to the form automatically.
            },
            error: function(model, xhr, options) {
                alert('Formatted error message. You can use the xhr.responseText, but that may not be user friendly');
            }
        });
    }
}

另外，请查看我在原始帖子下的评论.

Also, check out my comment under the original posting.

这篇关于检测主干模型更改以启用表单的保存按钮并更新模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！