Ember edit form template заполняет и обновляет значения

Question

Идея состоит в том, чтобы иметь форму, заполненную свойствами объекта текущего маршрута, позволяя пользователю обновлять свойства и отправлять изменения. Тем не менее, я не могу получить доступ к свойствам в контроллере, хотя я могу заставить их отображаться в шаблоне просто отлично. Поскольку я использую Ember-CLI, вот соответствующие файлы.

Я нашел документацию Ember для контроллера, обсуждая настройку модели контроллера на маршруте с помощью setupController. Это, однако, не сработало. Теперь я довольно из идей.

Если вы хотите увидеть его в немного более разборчивой форме, то также находится и GitHub Repo.

маршрутизатор

// router.js 
import Ember from 'ember'; 

var Router = Ember.Router.extend({ 
    location: EmberWbsENV.locationType 
}); 

Router.map(function() { 
    this.route('index', { path: '/' }); 
    this.route('items'); 
    this.resource('edit', { path: 'items/:item_id/edit' }); 
    this.route('new', { path: 'items/new' }); 
}); 

export default Router; 

Маршрут

// routes/edit.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function(params){ 
     return this.store.find('item', params.item_id); 
    }, 
    setupController: function(controller, item) { 
     controller.set('model', item); 
    } 
}); 

Контроллер

// controllers/edit.js 
import Ember from 'ember'; 

export default Ember.ObjectController.extend({ 
    // variables for form values 
    wbsCode: this.get('model.code'), 
    wbsAbbrev: this.get('model.abbrev'), 
    wbsDesc: this.get('model.desc'), 
    wbsIsSuffix: this.get('model.isSuffix'), 

    actions: { 

     // exit without changing anything 
     cancel: function() { 
      this.transitionToRoute('items'); 
     }, 

     // process new wbs item submissions 
     save: function() { 

      // set values from form to current instance model 
      this.set('code', this.wbsCode); 
      this.set('abbrev', this.wbsAbbrev); 
      this.set('desc', this.wbsDesc); 
      this.set('isSuffix', this.wbsIsSuffix); 

      // save item instance into data store and return to items list 
      this.save().then(function() { 
       this.transitionToRoute('items'); 
      }); 

     }, 

     // remove the current wbs item 
     remove: function() { 
      // TODO: create delete/remove method 
      this.transitionToRoute('items'); 
     } 
    } 
}); 

Шаблон

{{! templates/edit.js }} 
<form class="form-horizontal" role="form"> 
    <div class="col-sm-offset-2"> 
     <h1>Edit {{abbrev}}</h1> 
    </div> 
    <div class="form-group"> 
     <label for="wbs-code" class="control-label col-sm-2">Code</label> 
     <div class="col-sm-2"> 
      {{input type="text" class="form-control" id="wbs-code" placeholder="C04416" tabindex="1" autofocus="true" value=wbsCode}} 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="wbs-short" class="control-label col-sm-2">Short Description</label> 
     <div class="col-sm-2"> 
      {{input type="text" class="form-control" id="wbs-short" placeholder="ARC4" tabindex="2" value=wbsAbbrev}} 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="wbs-long" class="control-label col-sm-2">Long Description</label> 
     <div class="col-sm-8"> 
      {{input type="text" class="form-control" id="wbs-long" tabindex="3" placeholder="ArcGIS 4: Sharing Content on the Web" value=wbsDesc}} 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="is-suffix" class="control-label col-sm-2">WBS code suffix</label> 
     <div class="col-sm-8"> 
      {{input type='checkbox' class='glyphicon glyphicon-unchecked' id='is-suffix' tabindex='4' checked=wbsIsSuffix}} 
     </div> 
    </div> 
    <div class="col-md-offset-2"> 
     <buton type="button" {{action 'cancel'}} class="btn btn-default"> 
      <span class="glyphicon glyphicon-remove-circle"></span> Cancel 
     </buton> 
     <button type="button" {{action 'save'}} class="btn btn-primary"> 
      <span class="glyphicon glyphicon-save"></span> Save 
     </button> 
     <button type="button" {{action 'remove'}} class="btn btn-danger"> 
      <span class="glyphicon glyphicon-warning-sign"></span> Delete 
     </button> 
    </div> 
</form> 

Answer 1

Не полный ответ, но, возможно, вы начали:

От Тлеющей документы:

Если [атрибуты одной из форм в] атрибуты устанавливаются в кавычках, их значения будут установлены непосредственно на элементе. Однако, если они оставлены без кавычек, эти значения будут привязаны к свойству в текущем контексте визуализации шаблона. Например:

Вот пример формы Wich может сделать что-то подобное:

{{input type="text" placeholder=OriginalValue value=newValue action="submitProperty"}} 

<button class="btn btn-default" name='commit' {{action 'submitProperty' newValue}} 

Я думаю, вы можете форма иметь заполнитель со значением щёток свойств для данного свойства. А затем действие, которое передает новые значения, введенные в форму, в действие контроллера, которое обновляет свойства.

Также подумайте о том, чтобы попытаться установить проблему в js.bin: http://jsbin.com/ и настроить проблему там, чтобы получить лучшие ответы.