Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

access property of controller from within view

Tags:

ember.js

I wanna do something like a progress bar, which will be controlled by ember. So in my eyes, there are two and a half ways to achieve this:

  1. Have an observer in the controller, which sets the elements' width when triggered. Problem: AFAIK, one can't access DOM-elements from within the controller, i.e. like the way you'd do it in the view this.$('#progress').

  2. Have an observer in the view, which observes the controller's property. Problem: I don't know, how to observe (and access) a controller's property.

  3. (bind the controller's property via {{bindAttr}} to a freaky data-progress="42" attribute and adjust the elements width whenever the attribute's value has changed)

like image 558
lulezi Avatar asked Jan 21 '13 22:01

lulezi


People also ask

How do I access model value in view?

In Solution Explorer, right-click the Controllers folder and then click Add, then Controller. In the Add Scaffold dialog box, click MVC 5 Controller with views, using Entity Framework, and then click Add. Select Movie (MvcMovie. Models) for the Model class.

How pass data from controller view using ViewBag?

To pass the strongly typed data from Controller to View using ViewBag, we have to make a model class then populate its properties with some data and then pass that data to ViewBag with the help of a property. And then in the View, we can access the data of model class by using ViewBag with the pre-defined property.


1 Answers

Option 2 is your best bet.

Problem: I don't know, how to observe (and access) a controller's property.

Ember will set a view's controller property when the view is created, you can use that to access the controller's property.

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  percentComplete: '0'
});

App.ProgressView = Ember.View.extend({
  percentChanged: function() {
    percentString = (this.get('controller.percentComplete') + "%");
    this.$('.bar').css('width', percentString);
  }.observes('controller.percentComplete').on('didInsertElement')
});

I've posted a working example here: http://jsbin.com/hitacomu/1/edit

like image 53
Mike Grassotti Avatar answered Sep 27 '22 22:09

Mike Grassotti