形式预填充后访问值（使用Ember.js）

Question

我有一个用于保存和编辑记录的表单。在单击记录时，表单应填充数据。填充后，我想做一些UI动作（调用jQuery插件等）。

预填充有效，但是当我尝试访问这些值时，它仅在第二次单击时起作用。在第一次单击时，值为空或者之前单击的记录中的值。

此操作存储在控制器中：

edit: function(id) {

  var _this = this;

  // prefill form for editing
  var customer = this.store.find('customer', id).then(function(data) {
    _this.set('name',data.get('name'));
    _this.set('number',data.get('number'));
    _this.set('initial',data.get('initial'));
    _this.set('description',data.get('description'));
    _this.set('archived',data.get('archived'));

    // store user for save action
    _this.set('editedRecordID',id);
    _this.set('isEditing',true);

    $('input[type="text"]').each(function() {
      console.log(this.value)
    });

  });

},

我需要一种通用的方法来检查输入字段是否为空，因为我想要包含这个漂亮的UI效果：http://codepen.io/aaronbarker/pen/tIprm

的更新

我试图在View中实现它，但现在我总是得到之前点击的记录中的值，而不是当前点击的元素：

查看

Docket.OrganizationCustomersView = Ember.View.extend({

  didInsertElement: function() {
    $('input[type="text"]').each(function() {
      console.log(this.value)
    });
  }.observes('controller.editedRecordID')

});

控制器

Docket.OrganizationCustomersController = Ember.ArrayController.extend({

  /* ... */    

  isEditing: false,
  editedRecordID: null,

  actions: {

    /* ... */

    edit: function(id) {

      var _this = this;

      // prefill form for editing
      var customer = this.store.find('customer', id).then(function(data) {
        _this.set('name',data.get('name'));
        _this.set('number',data.get('number'));
        _this.set('initial',data.get('initial'));
        _this.set('description',data.get('description'));
        _this.set('archived',data.get('archived'));

        // store user for save action
        _this.set('editedRecordID',id);
        _this.set('isEditing',true);
      });

    },

    /* ... */

});

更新2

好吧，我想我误解了一些事情。

首先，我预期的控制台输出应为：

1.
2.
3. 

但是：

1.
3.
2.

其次：我可以在我的视图中使用任何名称，甚至是foobar，用于观察到的方法。的为什么吗

控制器

edit: function(id) {

  var _this = this;

  // prefill form for editing
  var customer = this.store.find('customer', id).then(function(data) {
    _this.set('name',data.get('name'));
    _this.set('number',data.get('number'));
    _this.set('initial',data.get('initial'));
    _this.set('description',data.get('description'));
    _this.set('archived',data.get('archived'));

    console.log('1.')

    // store user for save action
    _this.set('editedRecordID',id);
    _this.set('isEditing',true);

    console.log('2.')

  });

},

查看

Docket.OrganizationCustomersView = Ember.View.extend({

  foobar: function() {

    console.log('3.')

    $('input[type="text"]').each(function() {
      console.log(this.value)
    });
  }.observes('controller.editedRecordID')

});

更新3

我想我“想出来了”（但我不知道为什么）：

Docket.OrganizationCustomersView = Ember.View.extend({
  movePlaceholder: function() {

    $('input[type="text"], textarea').bind("checkval",function() {
      var $obj = $(this);    
      setTimeout(function(){
        console.log($obj.val());
      },0);

  }.observes('controller.editedRecordID')
});

setTimeout(function(){ ... }, 0);可以解决问题。但为什么呢？！

Answer 1

您可以在component中转换使用该jquery代码，这是创建可重用视图的最佳方式，而无需在控制器，路由器等中放置ui逻辑。

<强>模板

 <script type="text/x-handlebars" data-template-name="components/float-label">
    <div class="field--wrapper">
      <label >{{title}}</label>
      {{input type="text" placeholder=placeholder value=value}}
    </div>
  </script>

<强> FloatLabelComponent

App.FloatLabelComponent = Ember.Component.extend({
  onClass: 'on',
  showClass: 'show',
  checkval: function() {
    var label = this.label();
    if(this.value !== ""){
      label.addClass(this.showClass);
    } else {
      label.removeClass(this.showClass);
    }
  },
  label: function() {
    return this.$('input').prev("label");
  },
  keyUp: function() {    
    this.checkval();
  },
  focusIn: function() {    
    this.label().addClass(this.onClass);
  },
  focusOut: function() {    
    this.label().removeClass(this.onClass);
  }
});

看一下jsbin http://emberjs.jsbin.com/ILuveKIv/3/edit