模型未在表单提交时更新，使用 Backbone + Stickit

Posted 2023-02-24

【中文标题】模型未在表单提交时更新，使用 Backbone + Stickit

【英文标题】：Model not updating on form submit, using Backbone + Stickit

【发布时间】：2015-04-12 07:45:29

【问题描述】：

我正在尝试使用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】：

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

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

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

只是看起来更好，更“眼睛舒服”:)（但完全不是必须的）

这是你的小提琴的更新：http://jsfiddle.net/srhfvs8h/1/

【讨论】：

非常感谢，已经做到了。我不敢相信我错过了，完全有道理:-)