如何使Ember控制器处理服务器验证错误?

时间:2013-08-21 23:57:02

标签: validation ember.js ember-data

我将RESTAdapter与Ember Data一起使用。如何使Ember控制器处理服务器验证错误?我认为这段代码应该在“console.log(todo.errors);”中。但我不知道如何实现渲染所需的模板...

App.TodosRoute = App.AuthenticatedRoute.extend({
  model: function () {
    return App.Todo.find();
  }
});

App.TodosController = Ember.ArrayController.extend({
  createTodo: function(todo) {
    var data = this.getProperties('title', 'priority', 'due_date');
    var todo = App.Todo.createRecord(data);

    var self = this;

    todo.on('becameInvalid', function(todo) {
      // show errors on the form. code goes here
      console.log(todo.errors);
    });

    todo.on('didCreate', function() {
      // render list. code goes here
      self.set('title', '');
      self.set('priority', '');
      self.set('due_date', '');
    });
    todo.save();
  }
});

<script type="text/x-handlebars" data-template-name='todo/_edit'>
  {{input type='number' class="input" placeholder="Priority" value=priority}}
  {{input class="input" placeholder="What needs to be done?" value=title}}
  {{input type='date' class="input" placeholder="Due date" value=due_date}}
</script>

<script type="text/x-handlebars" data-template-name="todos">
  <section id="todoapp">
    <header id="header">
      {{partial 'todo/edit'}}
      <button {{action "createTodo"}}>Save</button>
    </header>

      <section id="main">
        <ul id="todo-list" class="sortable">
          {{#each controller itemController='todo'}}
            {{#unless isNew}}
              <li {{bindAttr class="isEditing:editing"}} data-id="{{unbound id}}">
                {{#if isEditing}}
                  {{partial 'todo/edit'}}
                  <button {{action "saveTodo"}} class="save-button">Save</button>
                {{else}}
                  <label>{{priority}}</label>
                  <label>{{title}}</label>
                  <label>{{date due_date}}</label>
                  <button {{action "editTodo"}} class="edit-button">Edit</button>
                  <button {{action "removeTodo"}} class="destroy">Delete</button>
                {{/if}}
              </li>
            {{/unless}}
          {{/each}}
        </ul>
      </section>
  </section>
</script>

1 个答案:

答案 0 :(得分:0)

最后我得到了这样的代码:

App.TodosNewController = Ember.ObjectController.extend({
  create: function() {
    var data = this.getProperties('title', 'priority', 'due_date');
    var todo = App.Todo.createRecord(data);

    var self = this;

    todo.on('becameInvalid', function(todo) {
      self.set('model', todo);
    });

    todo.on('didCreate', function() {
      self.set('priority', '');
      self.set('title', '');
      self.set('due_date', '');
      self.transitionToRoute('todos');
    });
    todo.save();
  }
});

希望,它会帮助某人