Question

我有以下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'}) );
    }

});

输出：[]

Answer 1

我找到了..

对HTML的更改：

而不是手动使用view和create选项，请使用以下代码

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

对JS的更改：

FormExample.select = Ember.Select.extend({

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

});

如何检测视图是否准备好？

1 个答案: