表單預填充後的訪問值（使用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

更新

我試圖在一個視圖中實現這一點，但現在我總是從點擊前的記錄中獲取值，而不是從當前點擊的元素中獲取值：

查看

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

OK，我想我誤會了一些事情。

起初，我預計控制檯輸出應該是：

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