模型不使用Backbone + Stickit更新表单提交

时间:2015-04-12 07:45:29

标签: backbone.js data-binding backbone-stickit

我尝试使用backbone.stickit库将表单输入绑定到模型,但似乎无法使模型正确更新。

keyup事件似乎工作正常,如果我使用" onSet"我可以看到值的变化。回调显示它:

    bindings: {
        '#firstName': {
            observe: 'firstName',
            onSet: function(val, options) {
                $('#output').html(val);
            }
        }
    }

这是我的代码(Run it on jsfiddle):

HTML

<div id="view">
    <form name="form" id="form">
        <input id="firstName" type="text"/>
        <input type="submit" id="submit"/>
    </form>
    <div id="output"></div>
</div>  

的JavaScript

var app = {

    Model: Backbone.Model.extend({
        firstName: 'test'
    }),

    View: Backbone.View.extend({
        el: "#view",

        initialize: function(){ 
            this.model = new app.Model();
            this.render(); 
        }, 
        bindings: {
            '#firstName': 'firstName'
        },        
        render: function(){ 
            this.$el.html( this.template ); 
            this.stickit();
        }, 
        events: {
            "submit #form": "submitForm"
        },

        submitForm: function(e) {
            e.preventDefault();
            $('#output').html('output:'+this.model.firstName);
        }

    })
};

var view = new app.View();

1 个答案:

答案 0 :(得分:0)

获取模型属性的方法通常不是通过将属性名称作为对象属性访问,而是通过您this.model.firstName的方式访问。就个人而言,我知道很少有这种实施的案例。所谓的正确方法是使用get方法: this.model.get("firstName")。 这将返回当前模型值。

我通常为我使用的每个模型定义getter和setter,所以我会执行以下操作:

getFirstName: function(){
    return this.get("firstName");
}

只是看起来更好,更容易“#34;轻松的眼睛&#34; :)(但完全不是必须的)

以下是您的小提琴的更新:http://jsfiddle.net/srhfvs8h/1/