3

そのため、ビューで呼び出され、モデルによって編集および検証されるバックボーン モデルのフィールドを取得しようとしています。どうすればそれを行うことができますか？contenteditable="true" を実行する html の方法があることは知っていますが、よりバックボーン指向の方法、または実際にそれを検証する方法も探しています。

これが私のmain.jsファイルの現在のコードです（しかし、私は.appendしようとはしていません。それをそのままにしておき、クリックしたテキストに応じてフィールドを具体的に呼び出す方法を見つけようとしています. 最終的には、ボタンも変更する必要があります (変更を保存するため)。

main.js

App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'first',
            lastName: 'last',
            email: 'Email',
            phone: '222',
            birthday: 'date'
        },

        validate: function (attrs) {
            if (!attrs.firstName) {
                return 'You must enter a real first name.';
            }
            if (!attrs.lastName) {
                return 'You must enter a real last name.';
            }
            if (attrs.email.length < 5) {
                return 'You must enter a real email.';
            }
            if (attrs.phone.length < 10 && attrs.phone === int) {
                return 'You must enter a real phone number, if you did please remove the dash and spaces.';
            }
            if (attrs.city.length < 2) {
                return 'You must enter a real city.';
            }
        }

    });

App.Views.UserUpdate = Backbone.View.extend({
        model: App.Models.User,
        events: {
            'click .edit': 'editUserProfile'
        },

        editUserProfile: function(field) {
            var field = 
            $('#user').append('<input type="text" class="edit" placeholder="' + field+'" /> ' );
        },

        initialize: function() {
            this.model.on('change', function() {
                this.render();
            }, this);
        },

        render: function() {
            this.$el.html(this.model.get('email'));
        }

    });

これはジェイドファイルです：

extends layout
block content   
    div.centerContent
        script(type="text/javascript", src="/js/main.js")

        h4 User goes here with equal before it no space
        div(contenteditable="true") 
            form#user
                - var firstName = "John"
                - var lastName = "Smith"        
                label #{firstName} #{lastName}
                - var email = "test@test.com"
                label.edit #{email}
                - var phone = "555-555-5757"
                label #{phone}
                - var pin = "PIN: LIO20001"     
                label #{pin}
                - var birthday = "07/28/1982"   
                label #{birthday}
            button Post
        hr

        div.user User
            p
                button.edit Edit
4

1 に答える 1

4

このためのフィドルを作成しました：http://jsfiddle.net/LTGjT/18/

編集可能なラベルごとにcontenteditableとを割り当てる必要があります。id

- var firstName = "John"
- var lastName = "Smith"        
label #{firstName} #{lastName}
- var email = "test@test.com"
label(contenteditable="true", id="email") #{email}
- var phone = "555-555-5757"
label(contenteditable="true", id="phone") #{phone}
- var birthday = "07/28/1982"   
label(contenteditable="true", id="birthday") #{birthday}

その理由は、 を取得することで、どのラベルが編集されているかを認識するためですevent.target。古いコードでは、event.targetは常に親になりdivます。

次に、ラベルの変更のイベントをbackboneリッスンして、モデルを更新します。input

App.Models.User = Backbone.Model.extend({
    defaults: {
        firstName: 'first',
        lastName: 'last',
        email: 'abc@abc.com',
        phone: '222',
        birthday: '01/01/2001'
    },

    initialize: function() {
    },

    validate: function (attrs) {
        if (!attrs.firstName) {
            return 'You must enter a real first name.';
        }
        if (!attrs.lastName) {
            return 'You must enter a real last name.';
        }
        if (attrs.email.length < 5) {
            return 'You must enter a real email.';
        }
        if (attrs.phone.length < 10 && attrs.phone === int) {
            return 'You must enter a real phone number, if you did please remove the dash and spaces.';
        }
        if (attrs.city.length < 2) {
            return 'You must enter a real city.';
        }
    }

});

App.Views.UserUpdate = Backbone.View.extend({
    model: App.Models.User,
    events: {
        'click button' : 'saveHandler'
    },

    initialize: function() {
        var self = this;
        self.render();
        console.log(this.model);
        $('[contenteditable=true]').on('input', function(e){
            var field = e.target.id;
            var value = e.target.innerText;
            self.model.set(field, value);
            logUser(self.model);
        });
        self.model.on('change', function(){
            $('button').show();
        });
    },

    saveHandler: function(e) {
        //Validate & Save logic
        //this.model.save()
        e.preventDefault();
        $(e.target).hide();
    },

    render: function() {
        var template = _.template($('#user-view').html());
        this.$el.html(template({user: this.model.toJSON()}));            
        $('body').prepend(this.$el);
        logUser(this.model);
    }

});
于 2013-08-07T07:57:51.780 に答える