Question

所以我试图让我的骨干模型中的字段在视图中被调用，由模型编辑和验证。我该怎么做呢？我知道有一种做出contenteditable =“true”的html方式，但我正在寻找一种更加以骨干为导向的方式或实际进行验证的方法。

这是我的main.js文件的当前代码（但我不是试图。禁止它我希望它保持原位并且还试图弄清楚如何根据文本具体调用该字段他们点击了。最终按钮也应该改变（保存更改）。

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

Answer 1

我为此创造了一个小提琴：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);
    }

});

如何在骨干视图中创建内联编辑？

1 个答案: