Backbone.js

Question

으로 자신의 Todo 목록 앱을 제작하려는 책 및 자습서의 도움으로 모델을 확인하십시오. 제 문제는 아빠가 할 일을 추가 할 때 렌더링 전에 입력에 텍스트가 있는지 확인해야합니다. 내가 유효성 검사 엄청나을 생성하지만 작품을 나던 그리고 난, 내가 감사 할 것 너희들이 내 오류가 발견 나를 도울 수 있다면 오류를 추적하는 방법을 잘 모릅니다

모델 :

var Task = Backbone.Model.extend({ 
    validate: function(attrs){ 
     if(!attrs.title){ 
      return "The task has no title"; 
     } 
    } 
}); 

var task = new Task; 

컬렉션 :

var Tasks = Backbone.Collection.extend({ 
    model: Task 
}); 


var tasks = new Tasks([ 
    { 
     title: 'my task' 
    }, 
    { 
     title: 'my task 1' 
    }, 
    { 
     title: 'my task 2' 
    }, 
    { 
     title: 'my task 3' 
    } 
]); 

조회수 :

var TaskView = Backbone.View.extend({ 
    tagName: "li", 

    template: _.template($('#task').html()), 

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

    render: function(){ 
     var template = this.template(this.model.toJSON()); 

     this.$el.html(template); 

     return this; 
    }, 

    events: { 
     'click .icon-checkbox': 'toggleState' 
    }, 

    toggleState: function(e){ 
     var $checkbox = $(e.target); 

     $checkbox.toggleClass('icon-checkbox-unchecked'); 

    } 
}); 

var TasksView = Backbone.View.extend({ 
    el: '#tasks', 

    initialize: function(){ 
     this.render(); 
     this.collection.on('add', this.addOne, this); 
    }, 

    render: function(){ 
     this.collection.each(this.addOne, this); 

     return this; 

    }, 

    addOne: function(task){ 
     var taskView = new TaskView({ model: task }); 
     this.$el.append(taskView.render().el); 
    } 
}); 

var AddTask = Backbone.View.extend({ 
    el: '#todos', 

    events:{ 
     'click #add': 'addTask' 
    }, 

    addTask: function(){ 
     var taskTitle = $('#inputTask').val(); 
     $('#inputTask').val(""); 
     var task = new Task({title: taskTitle}); // create the task model 
     this.collection.add(task); //add the model to the collection   
    } 
}); 


var tasksView = new TasksView({collection: tasks}); 
var addTask = new AddTask({collection: tasks}); 

편집 :

방금 ​​모델의 정보를 설정하거나 저장할 때 호출되는 유효성 검사 메소드가 실제로 인식된다는 것을 알았지 만 실제로 사용자가 할 일을 제출할 때 텍스트 또는 ini 순서와 함께 제공되는지 확인하는 것이 좋습니다. 모델을 만들고 렌더링합니다.

Answer 1

실제로 validate() 메서드를 호출하지 않습니다. Backbone Validation 플러그인을 살펴 보았습니까? 꽤 매끄럽게 작동합니다. 당신은 추가 작업 버튼을 누르면 일단 :

https://github.com/thedersen/backbone.validation

Answer 2

그래서 나는이 좋은 방법인지 잘 모르겠습니다 여부 또는 뷰가 여기에해야하지만 내가 한 것은,이 솔루션을 함께했다 addTask 메소드는 입력 내용이 텍스트인지 아닌지 먼저 확인합니다. 텍스트가 없다면 자리 표시 자만 변경됩니다. "Todo 's는 비어있을 수 없습니다."모델을 생성하고 뷰를 렌더링하지 않습니다. 그러나 입력에 텍스트가 있으면 모형을 작성하여 관할 구역에 추가하고 뷰를 렌더링하십시오!.

여기에 새로운 코드가 있습니다.이 코드가 유효한지 아니면 다른 모델이 유효한지 검증해야하는지 누군가가 알 수 있기를 바랍니다.

코드 :

var AddTask = Backbone.View.extend({ 
    el: '#todos', 

    events:{ 
     'click #add': 'addTask' 
    }, 

    addTask: function(){ 

     var taskTitle = $('#inputTask').val(); 
     $('#inputTask').val(""); //clear the input 

     if($.trim(taskTitle) === ''){ 
      this.displayMessage("Todo's can not be empty"); 
     }else{ 
      var task = new Task({title: taskTitle}); // create the task model 
      this.collection.add(task); //add the model to the collection    
     } 
    }, 

    displayMessage: function(msg){ 
     $('#inputTask').attr("placeholder", msg); 
    } 
});