Каков правильный способ сохранения данных ручной формы с помощью Ember.js?

Question

Я пытаюсь создать сохраненную вручную форму с умеренным количеством полей (допустим, 20) в Ember.js (не используя привязки в реальном времени), и до сих пор меня путают по правильному пути/лучшей практике для этого. Я нашел следующие методы:

http://www.solitr.com/blog/2012/06/ember-input-field-with-save-button/

How to use one-way binding on emberjs?

https://stackoverflow.com/a/16473186/1248965

Все вышеперечисленные методы кажутся Hacky до некоторой степени; они либо расширяют текстовое поле, либо используют наблюдателя за полем, требуя, чтобы вы перечисляли каждый из них. Есть ли другой способ? Что-то вроде «несвязанного» помощника, но позволяющее автомодельу обновлять магию/валидацию (через данные ember-data) на каком-либо действии (например, «unbound-until» или «условное связывание» или что-то еще)? Я прошел через все документы, SO, вопросы github, форум Ember и ссылки выше, и все еще чувствую, что, должно быть, что-то пропустил.

В принципе, способ сказать «сделайте все, что вы сделали бы с нормально связанной формой/полями, но только на определенном действии, а не в реальном времени».

Answer 1

Что вам нужно, это «буферный прокси», где вы временно сохраняете все изменения в модели (вы можете поймать их с помощью setUnkownProperty) в прокси-объекте. После того, как вы довольны изменениями, вы скопируете все данные прокси-сервера в фактический объект («очистите данные»).

App.Heisenberg = { 
    firstName: 'Walter', 
    lastName: 'White', 
}; 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Heisenberg; 
    }, 
    setupController: function(controller, model) { 
    controller.set('content', model); 
    } 
}); 

App.IndexController = Ember.ObjectController.extend({ 
    proxy: {}, 
    setUnknownProperty: function(key, value) { 
    console.log("Set the unknown property: " + key + " to: " + value); 
    this.proxy[key] = value; 
    console.log(this.proxy); 
    }, 
    flush: function() { 
    for(var key in this.proxy) 
     this.set('model.'+key, this.proxy[key]); 
    } 
}); 

Шаблон:

<script type="text/x-handlebars" data-template-name="index"> 
    Saved Name: {{firstName}} {{lastName}}<br /> 
    <br /> 

    <form {{ action "saveEdit" on="submit" }}> 
     First Name: {{input type="text" valueBinding="firstName"}}<br /> 
     Last Name: {{input type="text" valueBinding="lastName"}}<br /> 
     <br /> 
     <button {{ action "flush" }}>Flush</button> 
    </form> 
</script> 

Это сделало бы для хорошего контроллера Mixin.

См. this jsBin для примера.

Answer 2

Я нашел обходной путь, но я не 100% счастлива с ним:

В моем «редактирования» шаблон, у меня есть:

<form {{ action "saveEdit" on="submit" }}> 
    Title: {{input type="text" value=title}} 
    <input type="submit" value="Save"> 
    <button {{ action "cancelEdit" }}>Cancel</button> 
</form> 

Тогда в моем соответствующего контроллера, я делаю:

cancelEdit: function() { 

    var entry = this.get('model'); 

    this.set('isEditing', false); 
    entry.rollback(); 

}, 

saveEdit: function() { 

    var entry = this.get('model'); 

    this.set('isEditing', false); 
    entry.save().then(

    function() { 

    console.log('Saved!'); 

    } 

Я просто спрячу поля, где будет отображаться «живое обновление». Мне все же хотелось бы найти способ временно отключить привязку, пока я не активирую действие «saveEdit», поскольку это все еще кажется неэлегантным.