Question

我正在使用MV * JavaScript模式创建一个应用程序，其中提供了以下功能

创建创建笔记
编辑注释并维护相应的模型值。

我的注释Model就像：

var Note = (function(){
        var Note = function(noteHeader,note){
            this.noteHeader = noteHeader;
            this.note = note;
            this.noteId = new Date().getTime();
        }
        Note.prototype.getNoteHeader = function(){
            return this.noteHeader;
        }
        Note.prototype.setNoteHeader = function(noteHeader){
            this.noteHeader = noteHeader;
        }
        Note.prototype.getNote = function(){
            return this.note;
        }
        Note.prototype.setNote = function(note){
            this.note = note;
        }
        Note.prototype.getNoteId = function(){
            return this.noteId;
        }
        Note.prototype.setNoteId = function(nodeId){
            this.noteId = nodeId;
        }

return Note;
})();

View就像：

var NoteView = (function(){
        var NoteView = function(note){
            this.note = note;
        };

        NoteView.prototype.template = $("#addNoteTemplate").html();
        NoteView.prototype.editTemplate = $("#createNoteTemplate").html();
        NoteView.prototype.create = function(){
            this.template = this.template.replace("@@addNoteHeader@@",this.note.getNoteHeader())
                                         .replace("@@addNote@@",this.note.getNote())
                                         .replace("@@noteId@@",this.note.getNoteId());
            $noteContainer.append(this.template);
        } 
        NoteView.prototype.bindevents = function(){
            var that = this;
            $("footer","#" + that.note.getNoteId()).off("click").on("click",function(){
                      $("#" + that.note.getNoteId()).find(".addNoteTemplate").addClass("hide");
                      $("#" + that.note.getNoteId()).append(that.editTemplate);
                      $("#" + that.note.getNoteId()).find(".headerInput").prop("value",that.note.getNoteHeader());
                      $("#" + that.note.getNoteId()).find("textarea").val(that.note.getNote());
                      $("#" + that.note.getNoteId()).find(".createButton").off("click").on("click",function(){
                                $("#" + that.note.getNoteId()).find(".addNoteTemplate").removeClass("hide");
                                that.note.setNoteHeader($("#" + that.note.getNoteId()).find(".headerInput").val());
                                that.note.setNote($("#" + that.note.getNoteId()).find("textarea").val());
                                $("#" + that.note.getNoteId()).find(".createNoteTemplate").remove();
                                $("#" + that.note.getNoteId()).find(".noteHeader").html(that.note.getNoteHeader());
                                $("#" + that.note.getNoteId()).find(".noteText").html(that.note.getNote());
                      });
            });

        }

        return NoteView;
})();

和Controller like thing如下：

var $noteContainer = $("#noteContainer");
var noteCollection = [];
var init = function(){
    window.noteCollection = noteCollection;
    render();
}
var render = function(){
    createNoteTemplate();
}

var createNoteTemplate = function(){
    var createNoteTemplate = $("#createNoteTemplate").html();
    $noteContainer.append(createNoteTemplate);
    $(".createButton",$noteContainer).off("click").on("click",function(){
            var note = new Note($("input").val(),$("textarea").val());
            var noteView = new NoteView(note);
            noteView.create();
            noteView.bindevents();
            noteCollection.push(note);

    });

}

问题：

现在我的视图对象中有bindevents方法，这是正确的吗？我希望event-view-model之间进行通信（就像我正在编辑注释而不是编辑事件我想要更改视图和模型两者）。
如果不是在这种类型的模式中绑定事件的正确方法是什么？

Github上提供了完全正常工作的代码，请指导。

更好的方式绑定MV * JavaScript中的事件？

0 个答案: