Ember JS to bind helpers inside specific div

Question

Here I am facing the problem to bind my Ember.TextField into <div id="bindhere"></div> through IndexController without using template format. Because it appearing at the end of my code.

Here is my Template

 <script type="text/x-handlebars" id="index" > < button  {{action  "select"   on="click"}}>OK </button> 
 {{outlet}}
</script>

**Here is my Controller**

App = Ember.Application.create();
App.IndexController = Ember.ObjectController.extend({
    actions: {
        select: function(param1, param2) {


               Ember.TextField.create({


                    classNames: ['btn btn-sm btn-danger glyphicon glyphicon-pencil'],

                    type:               'button',
                    attributeBindings:  ['value'],  value:  "New Button",
                    action:  '{{formeditchangefinder}}' ,
                    onEvent: 'click',

                    //attributeBindings:  ['on'],  on:  ['click']


                   eventManager: Ember.Object.create({
                       click: function(event, view) {
                           alert("working"+elementname);

                       }
                   })

                }).append();


        }
    }
});

Here I have attached the following thing in JS-Bin http://jsbin.com/dupagi/1/

Answer 1

If I got your question correct -

check out this Demo

Basically you have to give an ID to the div you want to append to -

<div style="bindhere" id="bindhere"></div>

And then -

App.IndexController = Ember.ObjectController.extend({
    actions: {
        select: function(param1, param2) {

          var bindhere = $('#bindhere');


               Ember.TextField.create({


                    classNames: ['btn btn-sm btn-danger glyphicon glyphicon-pencil'],

                    type:               'button',
                    attributeBindings:  ['value'],  value:  "New Button",
                    action:  '{{formeditchangefinder}}' ,
                    onEvent: 'click',

                    //attributeBindings:  ['on'],  on:  ['click']


                   eventManager: Ember.Object.create({
                       click: function(event, view) {
                           alert("working"+elementname);

                       }
                   })

                }).appendTo(bindhere);


        }
    }
});