Модель не обновляется при отправке формы, используя Backbone + Stickit

Я пытаюсь использовать библиотеку backbone.stickit для привязки моего ввода формы к модели, но не могу заставить модель правильно обновляться.

Событие keyup работает правильно, я вижу изменение значения, если использую обратный вызов «onSet» для его отображения:

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

Вот мой код (Запустите его на 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();

data-binding backbone.js backbone-stickit
person Marcin    schedule 12.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Способ получения атрибута модели обычно заключается не в доступе к имени атрибута как к свойству объекта, как вы это сделали this.model.firstName. лично я знаю очень мало случаев такой реализации. Так называемый правильный способ сделать это — использовать метод get: this.model.get("firstName"). Это вернет текущее значение модели.

Обычно я определяю геттеры и сеттеры для каждой модели, которую использую, поэтому я бы сделал следующее:

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

Просто выглядит лучше и "приятнее для глаз" :) (но совсем не обязательно)

Вот обновление вашей скрипки: http://jsfiddle.net/srhfvs8h/1/

person MorKadosh    schedule 12.04.2015
comment
Спасибо большое, так и сделал. Я не могу поверить, что пропустил это, имеет смысл :-) - person Marcin; 12.04.2015