3

所以我试图让我的主干模型中的字段在视图中被调用，由模型编辑和验证。我该怎么做呢？我知道有一种 html 方式来做 contenteditable="true" 但我正在寻找一种更面向主干的方式或一种实际验证的方式。

这是我的 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/

您应该为每个可编辑标签分配contenteditableand ：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 回答