javascriptember.jsember-modelember.js-viewember-controllers

values from model are not updating to the view


I have displayed a textbox using Ember.View. In model i had specified all the details of the input.

App.Display = DS.Model.extend({
inputText: DS.attr('string'),
width: DS.attr('string'),
height: DS.attr('string'),
className: DS.attr('string')
})
App.Display.FIXTURES = [{
id: '1',
innnerText : 'helo',
width: '197px',
height: '25px',
className: 'DisplayClass'
}]

from the model how can i append the className , width,height and innerText to the display unit.

Here is my displayView

 <script type="text/x-handlebars" data-template-name="_display">
{{#view 'App.DisplayView'}}{{/view}}
 </script>

 App.DisplayView = Ember.View.extend({
tagName: 'input',

});

 App.DisplayController = Ember.ArrayController.extend({
actions: {

}
});

How to populate the model data (i.e. innerText,dimensions,className) through controller to the view. Note:Im not using any this.resource('somename')

In IndexRoute i have set the controller

  setupController: function (controller, model) {
    controller.set('model', model);
    this.controllerFor('Display').set('model', model.displayInput);

In IndexRoute

App.IndexRoute = Ember.Route.extend({
model: function(){
    return {
        //findall of model name 
        displayInput : this.store.findAll('display')
 }
 }

Now to use model to set and get the value of input


Solution

  • Working demo on JS Bin. You're using views - deprecated feature now - instead of components, which make code look not very nice and it's not ideal tool to implement behaviour you want. Instead I converted your approach to use components. Also, in Fixtures you've defined innnerText instead of inputText.

    So, let's start with component. Code:

    App.DisplayComponentComponent = Ember.Component.extend({
       tagName: 'input',
      attributeBindings: ['style', 'value'],
      style: Ember.computed('model', 'model.{width,height}', function() {
        var ret = '',
            width = this.get('model.width'),
            height = this.get('model.height');
    
        if (width) {
          ret += 'width: ' + width + ';';
        }
    
        if (height) {
          ret += 'height: ' + height + ';';
        }
    
        return ret;
      })
    });
    

    Component template:

    <script type="text/x-handlebars" data-template-name="display-component">
    </script>
    

    Then, correct fixtures:

    App.Display.FIXTURES = [{
    id: '1',
    inputText : 'helo',
    width: '197px',
    height: '25px',
    className: 'DisplayClass'
    }];
    

    There's also a problem with your model. I think it'll be easier to initialize model for display controller just in setupController model.

    setupController: function (controller, model) {
        controller.set('model', model);
        this.store.findAll('display').then(function(displays) {
            this.controllerFor('display').set('model', display.get('firstObject'));
        });
    }
    

    Then, if you want to use it, do it like that(I'm using your example with _display template, but I don't have a clue how do you use this):

    <script type="text/x-handlebars" data-template-name="_display">
    {{display-component model=model class=model.className value=model.inputText}}
    </script>
    

    I have to assume that _display template is for display controller, because you're question isn't clear at all.