CODEWITHSUNDEEP
ember.js
Moon
Moon

Reputation: 22565

How to detect if a view is ready?

I have the following html and js code snippets. Basically, I'm trying out Ember's select element. The problem is that I can't detect when the select element is ready to access.

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'}) );
    }

});

Output: []

Upvotes: 1

Views: 1805

Answers (1)

Moon
Moon

Reputation: 22565

I found it..

Changes to HTML:

instead of using view and create option manually, use the following code

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

Changes to JS:

FormExample.select = Ember.Select.extend({

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

});

Upvotes: 6

Related Questions