I heard of mvc in javascript many times,however I have no idea about how the mvc work in js.
Since I have used the goolge map v3,and I found the MVCObject.
It seems that this is a helper class used for register and listener the property chang event of the object.
I thinks this should be the "Model", Howver I have not found the "MVCView" there.
I am really confused with that.
Anyone can give me more details?
In javascript the view is mostly some html template that is rendered by some view class in js. The model is a class that is bound to that view so that, when it renders, the data from that model is being loaded on the correct positions in the templates. Take a look at backbone.js for example.
Here's a brief overview at a high level on how the MVC Pattern works:
Controller:
Listens on some kind of interaction/event stream.
Controller can send the model that type of interaction/event.
Controller can also communicate with the the view.
Model:
Models will listen in on the interaction/event from the controller.
Is an abstraction of a data source.
Handles data logic and manipulation.
After it is done with logic, it then sends to controller which will then communicate with the view.
View:
View can communicate with the controller.
Knows how to render data from the Model to the browser visually.
The Controller tells to View to do something with something from the
Model.
A couple of things to note is that models can't communicate with views directly and vise versa. Only the controller can communicate with the view and model, so the controller acts as the delegator for the interaction/event retrieved from users interaction on the browser.
Related
I am using AngularJS 1.5 and using ‘$emit’ to send an event to parent controller to refresh parent controller data. On ‘$On’ I have written the logic to refresh the parent controller data.
Now, Parent controller data is being updated but after that it is unable to bind data for the child controller from where ‘$emit’ was triggered.
I tried to use ‘$apply’ but it is saying that ‘$digest’ is already in progress. I have also use Batrang tool to view the data and it is showing that page having all those data but it is not being displayed on UI.
Can anybody tell me how to force angular to bind those data with HTML Control which is already available on the page.
I cannot put sample code here because it's a live project & I'll have to create a sample project to replicate the issue. Even though If it is not easy to answer my query without sample code then I will put sample code on Plunker in a day.
Based on Angular documentation, there are two methods to declare controller in HTML:
one binds methods and properties directly onto the controller using ng-controller="SettingsController1 as settings"
one injects $scope into the controller: ng-controller="SettingsController2"
The second option is more common in the Angular community, and is
generally used in boilerplates and in this guide. However, there are
advantages to binding properties directly to the controller and
avoiding scope.
Using controller as makes it obvious which controller you are
accessing in the template when multiple controllers apply to an
element. If you are writing your controllers as classes you have
easier access to the properties and methods, which will appear on the
scope, from inside the controller code. Since there is always a . in
the bindings, you don't have to worry about prototypal inheritance
masking primitives.
So you could always refer to parent scope in child scope by using controller as:
<div ng-controller="parentController as parent">
<span>{{parent.title}}</span>
<div ng-controller="childController as child">
<span>{{parent.title}}</span>
<span>{{child.title}}</span>
</div>
</div>
I'm trying to understanding what MVC is, why it's useful, and if I should use it or not.
In the context of dynamic websites, what are the models, views, and controllers? I've seen these as examples before, are they all right or is only one of them right?
Model: HTML, view: CSS, controller: Javascript
Model: database, backend processing; view: HTML, CSS, Javascript;
controller: HTTP (GET/POST), URLs
Model: database; view: HTML, CSS, Javascript; controller: backend
processing
Are there other examples of MVC in web development?
This is a mega-vague question, but here's one generalization...
Controller (JavaScript): Listens to clicks and notifies methods on your model/view-model.
Model (JavaScript): This encapsulates methods for serializing/deserializing data from sources like a database, public API, whatever.
ViewModel (JavaScript): This handles formatting data in your model for display by your view (e.g. pretty-formatting names, emails, numbers, etc)
View (HTML+CSS): This is what the user sees. It shows information that's described by your view-model and dispatches events that are listened to by your controller.
Please take a look at this JSBin1. I am using the same template for both the render in the index template and manually rendered in the renderTemplate function of the ColorsRoute. Clicking the More Colors link does not render the list of colors I return in the ColorsRoute model hook. Now, if you change the render 'colors-list model to render colors-list2 model, as I have done here, everything works as I would expect it to. The only difference between the two is that in JSBin1, I am only using the colors-list template, but in the second working example, I have one template for the render and an identical, differently named template for the ColorsRoute.
The code example, while trivial in the JSBin, is an exact extraction of something I am doing in a much larger application. This application has a bunch of widgets, which I represent by multiple named outlets in the same templates. I manually render into these outlets, as I do in the JSBin in the ColorsRoute renderTemplate hook. I do the manually rendering so that when certain events happen, I have actions defined on the route that will allow me to dynamically replace the contents of the outlet after making an ajax call to a REST API.
What is the explanation for this kind of behavior?
It's more related to the controller that's being created, not the template. And technically I'd say it shouldn't work on either, but it appears there's some route where if you don't define a controller, and that type of controller hasn't been created, create it, and use the current controller/model as the model backing it.
Really you should be providing a controller when using render if you're expecting it to have that controller as the backing controller.
renderTemplate: function(controller, model){
this.render();
this.render('color-list', {
outlet: "named",
into: 'colors',
controller: controller
});
}
http://emberjs.jsbin.com/cevagocekofu/3/edit
I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?
you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component
My understanding is that when I run
App.CheeseController = Ember.Controller.extend({ type:"brie"});
A class CheeseController is created and that when I activate the Cheese route an instance of that class is made which is what I actually touch when talking to the controller in my handlebars template.
Is it possible to directly access that instantiated object from within the javascript console (or from within my program)? More generally, where do the objects that Ember automatically makes live?
A class CheeseController is created and that when I activate the Cheese route an instance of that class is made which is what I actually touch when talking to the controller in my handlebars template.
Yes that is exactly what happens. Ember creates a singleton instance of App.CheeseController and provides it as the context when rendering your handlebars template.
Is it possible to directly access that instantiated object from within the javascript console
Yes. The best way to do this from the javascript console is by using the handlebars {{debugger}} helper from your template. This will open the JS debug console in the context of your template.
<script type="text/x-handlebars" data-template-name="cheese">
{{debugger}}
</script>
With debugger open, you can access the instantiated controller singleton as this, so this.toString() should return something like <App.CheeseController:ember225>.
(or from within my program)?
Depends on which part of your program
From a route: Use this.controllerFor('cheese')
From a model: No. Please don't access controllers from models.
From another controller: If you declare a dependency in the other controller, needs: ['cheese'] then the singleton App.CheeseController will be accessible from the other controller via the property controllers.cheese. See Automatically synthesize the controller 'needs' dependencies
From a template: Use the needs array to declare a dependency from the templates controller, then from within your template the cheese controller is at: {{controllers.cheese}}
It is also possible to access the cheeseController instance via the ember container, but please don't. The container is not meant to be a public API. Recent updates to Ember have made accessing it somewhat awkward. This is because using global constants to access instances breaks encapsulation, and while that is fine for the console it should be avoided in your application code. For more detail, see App.container was not meant to be a public API
More generally, where do the objects that Ember automatically makes live?
Internally ember caches controller singletons in the container. Of course it is not a part of the public API, but if you are curious about how things work internally check out container_test.js and
What is the purpose of the Ember.Container