2012-01-30 1 views
1

私は以下のhtmlコードとjsコードを持っています。基本的に、私はEmberの選択要素を試しています。問題は、select要素がいつアクセス可能かを検出できないことです。ビューの準備ができているかどうかを検出する方法は?

HTML:

<!DOCTYPE html> 
<html> 
<head> 

    <title></title> 

    <link href='lib/uniform/css/uniform.default.css' rel='stylesheet'/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="../lib/ember.min.js"></script> 

    <script type="text/javascript" src='lib/uniform/jquery.uniform.js'></script> 

    <script type="text/javascript" src="Form.js"></script> 

</head> 

<body> 


<script type="text/x-handlebars"> 


</script>  

<script type="text/x-handlebars"> 



{{#view contentBinding="FormExample.selectValues" valueBinding="type" tagName="select"}} 

    {{#each content}} 

     <option {{bindAttr value="fullName"}}>{{fullName}}</option> 

    {{/each}} 

{{/view}} 


</script> 

</body> 

</html> 

JS:

FormExample = Ember.Application.create({ 

    ready: function() 
    { 

     this._super(); 

      // $("select").uniform(); // doesn't work 

     $(document).ready(function(){ 
      console.log($("select")); 

       //$("select").uniform(); // doesn't work 
     }); 


    } 

}); 


FormExample.Person = Ember.Object.extend({ 
    id: null, 
    firstName: null, 
    lastName: null, 

    fullName: function() 
    { 
     return this.get('firstName') + " " + this.get('lastName'); 
    }.property('firstName','lastName').cacheable() 
}) 





FormExample.selectValues = Ember.ArrayController.create({ 

    content: [ 
     FormExample.Person.create({id:1, firstName: 'a', lastName:'a'}), 
     FormExample.Person.create({id:2, firstName: 'b', lastName:'b'}), 
     FormExample.Person.create({id:3, firstName: 'c', lastName:'c'}) 
    ], 

    // test for auto binding 
    add: function() 
    { 
     this.pushObject(FormExample.Person.create({id:4, firstName: 'd', lastName: 'd'})); 
    } 

}); 

出力:[]

答えて

6

私はそれを見つけた... HTMLへ

変更:

代わりのビューを使用して、手動でオプションを作成し、JSに次のコードを使用し

{{view FormExample.select 
     contentBinding="FormExample.selectOptions" 
     selectionBinding="FormExample.selectedOption.person" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id"}} 

変更:

FormExample.select = Ember.Select.extend({ 

    didInsertElement: function() 
    { 
     $("select").uniform(); 
    } 

}); 
+0

そう私は)(制服と同じ問題がありました。あなたの解決策は正しいです:) – Jamsi

関連する問題