New Ember user here,
I am having an issue trying to get a dropdown view to be populated with initial values from a model on transition to any one of multiple edit routes. I am currently using fixture data...
My router is setup as such:
StoryTime.Router.map(function () {
this.resource('projects', function(){
this.resource('project', { path: '/:project_id' }, function(){
this.resource('stories', function(){
this.resource('story', { path: '/:story_id' }, function(){
this.route('edit');
});
});
this.route('edit');
this.route('report');
this.route('export');
});
this.route('new');
});
});
with a route for editing a story as:
StoryTime.StoryEditRoute = Ember.Route.extend({
setupController: function (controller, model) {
controller.set('model', this.controllerFor('story').get('model'));
}
});
and my controller setup as:
StoryTime.StoryEditController = Ember.ObjectController.extend({
needs:['story', 'project'],
actors: Ember.computed.alias('controllers.project.actors'),
selectedActor: null,
updateActor: function(){
var actor = this.get('selectedActor'),
model = this.get('model');
model.set('actor', actor);
}.observes('selectedActor'),
actions: {
//actions...
}
});
and my template has this piece in question in it:
<div class="form-group">
<label class="control-label col-sm-2 text-left no-padding">Actor:</label>
<div class="controls col-sm-10">
{{model.actor.name}}: {{model.actor.id}}
{{view Ember.Select
name = "actorSelect"
content = actors
optionLabelPath = "content.name"
optionValuePath = "content.id"
selectionBinding = "selectedActor"
class = "form-control"
}}
</div>
</div>
My preferable setup would have:
The model being given to the controller (set by the story edit route to be the model given to the stories route) populate the dropdown box's initial value, but then binds the subsequent selection to the controllers attribute for processing, and
The controller changes the "selectedActor" attribute to null again on transition to another edit route.
Right now, this is not happening. Here's what is happening:
When I navigate to .../stories/1/edit for example, the dropdown is not populated to the model's actor value, but rather the first thing in the list
If I change the value it changes the controller's model's actor, as expected.
However, on subsequent transitions to ../stories/2/edit the dropdown is still populated with the old selected value due to "selectedActor" being set to it.
Can anyone illuminate as to what I am missing here? I feel like there has to be way to both work with the Ember Select view and a way to reset attributes of a particular route or controller on transition. Am I incorrect on this thinking?
Thanks for any insight!
Yeah, fanta is right. You just need to remove a whole bunch of code from your controller and modify your template slightly. Replace your controller and template like so:
StoryTime.StoryEditController = Ember.ObjectController.extend({
needs:['story', 'project'],
actors: Ember.computed.alias('controllers.project.actors'),
actions: {
//actions...
}
});
<div class="form-group">
<label class="control-label col-sm-2 text-left no-padding">Actor:</label>
<div class="controls col-sm-10">
{{actor.name}}: {{actor.id}}
{{view Ember.Select
name = "actorSelect"
content = actors
optionLabelPath = "content.name"
optionValuePath = "content.id"
selectionBinding = actor
class = "form-control"
}}
</div>
</div>
Note you don't need model references in your template. Ember will automatically pass the references back to the underlying model. The primarily job of the controller is to decorate and provide the model (and handle actions & events) to the template / views.
Related
I want to embed a nested component in a page.
(A page is actually a controller that can be reached via the $routeProvider service)
And I want to bring data from the main component to its child component and vice versa - in order to make all of the components in the page and the page itself talking with each other in a full data binding.
I success to send data from parent to child with specific bindings attributes, however, I am not getting a way to bring data from child to parent.
// lobby.js - the main page.
// we can reach this page via browser by the $routeProvider service
app.config(($routeProvider) => {
$routeProvider
.when("/", {
templateUrl : "screens/lobby/lobby.html"
})
});
app.controller("lobby", ($scope, datepickerService) => {
$scope.title = "Welcome to Lobby screen!";
$scope.order = {};
$scope.send = function() {
console.log($scope.order);
};
});
Lobby.html
<!-- This is lobby.html file -->
<!-- Which is the html template of the main page (lobby.js) -->
<link rel="stylesheet" href="screens/lobby/lobby.css">
<div class="lobby" ng-controller="lobby">
<date-picker type="default" model="startDate"></date-picker>
<date-picker type="default" model="endDate"></date-picker>
<button type="button" name="button" ng-click="send()">Send</button>
</div>
Now as you can see, in the lobby.html file I have a nested component which is <date-picker></date-picker>. From parent I pass to this child component two attributes: type and model.
Now lets see this component functionality:
// datepicker.js component (actually defined as a directive)
// Initializing a datepicker plugin from jQuery UI Lib.
app.directive("datePicker", (datepickerService) => {
return {
templateUrl: "/shared/datepicker/datepicker.html",
scope: {
model: "#",
type: "#",
},
link: function(scope, elements, attrs) {
$(function() {
setTimeout(function () {
$("." + scope.model).datepicker({
onSelect: function(value) {
value = datepickerService.correct(value);
$("." + scope.model).val(value);
console.log(value);
}
});
}, 200);
});
}
}
});
datepicker.html
<!-- datepicker.html the datepicker html template -->
<!-- Successfuly getting the datepicker to be loaded and work -->
<box ng-show="type=='default'">
<input type="text" class="{{model}}" readonly>
</box>
Now the problem: notice the:
// lobby.js
$scope.send = function() {
console.log($scope.order);
};
in the lobby.js file.
I need this to send the actual startDate and endDate to a remote server. However I cannot access this data! $scope.order remains blank.
I have tried using components instead of directives I have tried ng-include I have tried more lot of things that I wont bother you with, since I have spent on it more than 3 days.
How can I work with nested components so all of the data will be shared through each of them, including the main page in AngularJS in order to create a scaleable modern app?
Thanks.
For sending data from parent to child angular provides the $broadcast() method and for sending data from child to parent it provides the $emit() method.
More info:
http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx
I think you have to reference your startDate and endDate within your order object. Right now it seems you save those directly on your $scope.
Try this to verify:
console.log($scope.order, $scope.startDate, $scope.endDate);
add "order." in front your objects within the model attribute.
<!-- This is lobby.html file -->
<!-- Which is the html template of the main page (lobby.js) -->
<link rel="stylesheet" href="screens/lobby/lobby.css">
<div class="lobby" ng-controller="lobby">
<date-picker type="default" model="order.startDate"></date-picker>
<date-picker type="default" model="order.endDate"></date-picker>
<button type="button" name="button" ng-click="send()">Send</button>
</div>
Also, you might also need to change the attribute definition of your component to use bidirectional binding. Use "=" instead of "#". # only represents a copy of the value when getting passed to your component and not saved back to the original object.
...
scope: {
model: "=",
type: "#",
},
...
Update:
Please find my working Plunker here https://embed.plnkr.co/2TVbcplXIJ01BMJFQbgv/
I am updating and modifying a project using Angular JS 1.2.25.
I have my controller where I have a value called vm.stageValue which is then called in template with an ng-if, so when the vm.stageValue increments it shows different containers. But whhen I define a value on the vm object that I want to interpolate on the template, eg a string that will be used and will not change on the template, I cannot seem to get it display.
This has makes me think I have not set up my controller correctly using the vm method.
It seems weird that I can use the ng-if and call function from the controller using ng-click on the template but I cannot interpolate a string or send it to another child component
Code is below, thank you in advance. Any help would be hugely appreciated
Controller
angular
.module('formModule')
.controller('NewBusinessFormCtrl', [
function() {
let vm = this;
// Methods used in controller
vm.methods = {
incrementStageValue: incrementStageValue,
decrementStageValue: decrementStageValue,
canIncrement: canIncrement,
canDecrement: canDecrement
};
//Initial stage values
vm.stageValue = 1;
vm.maxStageValue = 7;
// This is the string that I want to interpolate below
vm.contactFormCategory = 'New Business';
}
]);
Template of Controller
<div class="new_busines_cf" ng-controller="NewBusinessFormCtrl as vm">
<div class="form_wrapper">
<div ng-if="vm.stageValue == 1">
<input-text
class="form_input"
ng-model="ngModel"
input-text-label="This is the label">
</input-text>
// I want to send the vm.contactFormCategory into the component
// Value is sending but the component display 'vm.contactFormCategory'
// Not the value set in the controller
<form-headline
form-headline-sup-title="vm.contactFormCategory"
form-headline-text="This is a form headline text">
</form-headline>
</div>
// Trying to interpolate value here into template, but nothing display
{{vm.contactFormCategory}}
<div ng-if="vm.stageValue == 2">
<input-text
class="form_input"
ng-model="ngModel"
input-text-label="This is the label of stage 2">
</input-text>
<form-headline
form-headline-sup-title="vm.contactFormCategory"
form-headline-text="This is a form headline text">
</form-headline>
</div>
<button ng-click="vm.methods.incrementStageValue()">Increment Value</button>
<button ng-click="vm.methods.decrementStageValue()">decrement Value</button>
</div>
</div>
** Form Headline **
angular
.module('formModule')
.directive('formHeadline', function() {
return {
restrict: 'E',
templateUrl: '/partials/form/form-headline.component.html',
scope: {
formHeadlineText: '#',
formHeadlineSupTitle: '#'
},
link: function () {
}
};
});
Change your ng-if to
<div ng-if="vm.stageValue === '2'">
When the input select is loaded in an HTML form, sometimes the data get from the back-end is not ready and the select is displayed without any option selected.
Could be possible to wait that the data is loaded before write the input select in the page?
or there are any other way to select the right option depending on the angular value.
PS. i can't change the data that i get from the back-end and that are una array for the all value and another variable with the selected option. The first one is always loaded correctly but sometimes the second one is empty when i want to select an option.
thanks
I assume you're using asynchronous methods to load the data. In such case, the following should work.
First, have such markup:
<div ng-show="loading">
Loading, please wait...
<!-- can also put gif animation instead -->
</div>
<select ng-hide="loading">...</select>
And in the controller:
$scope.loading = true;
GetData().then(function() {
$scope.loading = false;
}, function() {
$scope.loading = false;
alert('error');
});
This assumes you load the data in a function that returns a Promise, you can of course just put the $scope.loading = false; line in the proper location in your code, after the data is actually loaded.
The effect will be that while $scope.loading is set to true, the user will see the "Loading" message while the drop down is hidden, and when you set it to false, the drop down will become visible while the "Loading" message will become hidden.
Try to get access after event stateChangeSuccess
$scope.$on('$stateChangeSuccess', function() {
(function() {
})();
});
That is how I fix this problem using AngularJS, Angular Resource & Ui-router to display selected object in an entity with Relationship:
Given that we have to entity in a simple relationship:
Class: name(String), level(String). ----> A class in school.
Child: name(String), pseudo(String). ----> A Child.
A child can be in one class at a time and there is many classes in school.
So We can have something like this(a One-To-One):
Class: name(String), level(String). ----> A class in school.
Child: name(String), pseudo(String), class(Class). ----> A Child.
In my Ui-router state I do something like this when editing a Child:
That is the state of the child to edit, when click on a link corresponding to it we query him and use a controller to resolve the entity related to him.
.state('child-edit', {
parent: 'entity',
url: '/child/{id:int}',
views: {
'content#': {
templateUrl: 'path/to/chil/view/child-edit.html',
controller: 'ChildEditController'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('child');
return $translate.refresh();
}],
entity: ['$stateParams', 'ChildService', function($stateParams, ChildService) {
// We return the child to edit using a service.
return ChildService.get({id : $stateParams.id});
}]
}
})
That is the controller I use to make this run normally:
angular.module('myApp').controller('ChildEditController',
['$scope', '$stateParams', '$q', 'entity', 'ClassService',
function($scope, $stateParams, $q, entity, ClassService) {
// We get all classes of school here.
$scope.classes = ClassService.query();
// That is the promise of child to edit get from resolve in state.
$scope.childToEdit = entity;
$q.all([$scope.classes.$promise, $scope.childToEdit.$promise]).then(function() {
// When all data are resolved
// In Js two objects with same properties and valyes but different memory allocation are different.
// So I test value of Id before setting the right class of this child and angular will make able to edit
// him in the UI with the ng-model
var classOfChild = $scope.childToEdit.class;
for (var k in $scope.classes) {
if ($scope.classes[k].id === classOfChild.id) {
// We put the same reference of this class: then it will be selected in the UI of select box
$scope.childToEdit.class = $scope.classes[k];
}
}
});
}]);
And the associated UI in HTML:
<!-- The name of Child -->
<div class="form-group">
<div class="col-md-4">
<label for="field_child_name">Name of Child</label>
<input type="text" class="form-control" name="name" id="field_child_name"
ng-model="childToEdit.name"
required />
</div>
</div>
<!-- Selected class of child will be display here with all other classes available -->
<div class="form-group">
<div class="col-md-4">
<label for="field_child_class">Class of Child</label>
<select class="form-control" id="field_child_class" name="class" ng-model="childToEdit.class" ng-options="class as class.name + ' : ' + class.level for class in classes">
<option value=""></option>
</select>
</div>
</div>
Note: Hope it is the same situation where the selected data is not displaying because the references of querying class and property class in child object are different.
I'm working on a small app in AngularJS. My project contain a Body.html file that contain 3 views: SideMenu, Header and Content, each with each own Controller and a MainController as there parent - the controller of the Body.html.
Can the header's controller change a property in the side-menu - the open/close status of the side-menu.
And Can the side-menu controller change a property in the header - the header's text.
I can use the main controller, since both of the header's controller and the side-menu controller can reference the main controller. But the data won't be consist. Updating the data from the 1st controller wan't effect the data in the 2nd controller (without the use of $watch).
Can both the side-menu's controller and the header's controller (sibling controllers) communicate with each other? without the help of there parent?
Body.html
<div>
<!-- Header placeholder -->
<div ui-view="header"></div>
<!-- SideMenu placeholder -->
<div ui-view="sideMenu"></div>
<!-- Content placeholder -->
<div ui-view></div>
</div>
Header.html
<div>
{{ headerCtrl.text }}
</div>
<div ng-click="headerCtrl.openSideMenu()">
--Open--
</div>
HeaderController.js
// sideMenuCtrl = ???
headerCtrl.text = "Title";
headerCtrl.openSideMenu = function()
{
sideMenuCtrl.isSideMenuOpen = true;
};
SideMenu.html
<div ng-class={ 'side-menu-open': sideMenuCtrl.isSideMenuOpen }>
<div ng-repeat="menuItem in sideMenuCtrl.sideMenuItems"
ng-click="sideMenuCtrl.selectMenuItem(menuItem)">
{{ menuItem.text }}
</div>
</div>
SideMenuController.js
// headerCtrl = ???
sideMenuCtrl.selectMenuItem = function(menuItem)
{
headerCtrl.text = menuItem.text;
}
As stated in my comment, you can use an AngularJS service to share some data between your controllers.
app.service('AppContextService', function(){
this.context = {
isSideMenuOpen: false
};
});
app.controller('SideMenuCtrl', ['$scope', 'AppContextService', function($scope, AppContextService) {
// exposing the application context object to the controller.
$scope.appContext = AppContextService.context;
}]);
app.controller('HeaderCtrl', ['$scope', 'AppContextService', function($scope, AppContextService) {
$scope.appContext = AppContextService.context;
$scope.openSideMenu = function()
{
$scope.appContext.isSideMenuOpen = true;
};
}]);
Then adapt the HTML to use your shared appContext object.
<div ng-class={ 'side-menu-open': appContext.isSideMenuOpen }>
[...]
</div>
Here is a working fiddle that illustrates the issue: fiddle
This answer covers the use of a service to fit your needs but I am sure that there are other (and perhaps better) ways to tackle the problem which might involve other Angular feature, or even some overall application refactoring.
To dig a little deeper, this SO topic might be a good start: difference between service, factory and providers
UPDATE :
I have got my code working, of sorts, but I have two issues and one problem I am not sure how to fix. I will post my current code below. One The Clients append to the right section within the TimesheetData template. But it wraps the option tag within the ClientData template within another option .
So I get :
<select>
<option> <option value="XX"> XXX </option> </option>
</select>
Now I know this is what it is designed to do, to have a root element but I can not seem to find a solution to this issue, although it still works.
Now the other issue is that I need to select a default client, which is loaded into the Timesheet model, Timesheetrow.client_id holds what the database as saved for that row. I just not sure how to access this in an if statement or some other way within the client template.
Now the problem I have is that the Client data does not always load? So when I reload / refresh the page it sometimes lists all my clients in option tags, sometimes it loads nothing, just giving me an empty select tag. However when it does not load anything, I don't have any console log errors or anything?
All help most welcome :)
So this is my current Backbone code:
Client Data Code :
var ClientModel = Backbone.Model.extend({
defaults: {
Client: "",
}
}); //End of ClientModel
var ClientCollection = Backbone.Collection.extend({
model: ClientModel,
url: '/dashboard/json/clients'
}); //End of ClientCollection
var ClientView = Backbone.View.extend({
tagName: 'option',
template: _.template($('#ClientData').html()),
render: function() {
this.$el.append(this.template(this.model.toJSON()));
return this.$el;
}
});
Timesheet Data Code :
var TimeSheetModel = Backbone.Model.extend({
defaults: {
Timesheetrow: "",
}
}); //End of TimeSheetModel
var TimeSheetCollection = Backbone.Collection.extend({
model: TimeSheetModel,
url: '/dashboard/json/row/' + TimesheetID()
}); //End of TimeSheetCollection
var TimeSheetRowView = Backbone.View.extend({
className: 'TimesheetRowLine',
template: _.template($('#TimesheetData').html()),
render: function() {
this.$el.append(this.template(this.model.toJSON()));
return this.$el;
}
}); //End of TimeSheetRowView
Timesheet & Client Code Section:
var TimeSheetCollectionView = Backbone.View.extend({
el:'#MasterContainer',
template: _.template($('#TimesheetForm').html()),
events: {
"click .actionSubmit": "handleSubmit"
},
initialize: function() {
//Get Client Data & Add To Template
this.clientcollection = new ClientCollection();
this.listenTo(this.clientcollection, "add", this.AddClient);
this.clientcollection.fetch();
//Get Main Timesheet Data & Add To Template
this.collection = new TimeSheetCollection();
this.listenTo(this.collection, "add", this.AddTimesheetRow);
this.collection.fetch();
this.$el.append(this.template());
this.submitButton = this.$(".actionSubmit");
},
AddTimesheetRow: function(model) {
var view = new TimeSheetRowView({model: model});
view.render().insertBefore(this.submitButton);
},
AddClient: function(model) {
var clients = new ClientView({model: model});
$("#TimesheetDataList .TimesheetRowLine #clienttemp").append( clients.render() );
},
handleSubmit: function(){
//in real life, you would validate and save some model
alert("form submit");
return false;
}
}); //End of TimeSheetCollectionView
var collectionView = new TimeSheetCollectionView();
This is my Underscore Template code:
<script type="text/template" id="TimesheetForm">
<form action="#" method="post" id="TimesheetDataList" style="width: auto; padding-left: 50px;">
<input type="submit" class="actionSubmit" value="Send"/>
</form>
</script>
<script type="text/template" id="TimesheetData">
<%= console.log( Timesheetrow.client_id ) %>
<input type="hidden" name="data[Timesheetrow][<%= Timesheetrow.id %>][id]" value="<%= Timesheetrow.id %>">
<input type="type" name="data[Timesheetrow][<%= Timesheetrow.id %>][jobtitle]" value="<%= Timesheetrow.twistjob %>">
<select name="data[Timesheetrow][<%= Timesheetrow.id %>][client_id]" id="clienttemp"></select>
</script>
<script type="text/template" id="ClientData">
<option value="<%= Client.id %>"><%= Client.clientname %></option>
</script>
OLD POST
Ok, I am having an issue with my Backbone view rendering into my Underscore template, again. I thought it would be best to ask it as a new question.
My last question, Underscore Template Looping, Without A Loop?, the guy on there help me very well but I am now trying, with little success to edit this code and extend it a little more.
CODE REMOVE - SEE UPDATE
So I was trying to follow the same methods. I know I have to look up more training to expand my knowledge.
With this code, I have a list of clients, I need to load into a select / option pull down form element. But it only seems to loop around 17 times, which is the number of rows I have in my timesheet. I am console logging 'Client' in the 'ClientData' template, this is what displays my client data but only the client data that is logged in my timesheet rows, not all the clients from the JSON data that the model / collection is pointing to? I am also getting a ref. Error for Client? Even though it is in my model as a default?
I am understanding backbone (a bit), but not Underscore so much.
All help most welcome.
Thanks,
:: EDIT ::
I thought I would post my Underscore templates.
CODE REMOVED - SEE UPDATE
So what I am trying to do is loop around in ClientData template for all the clients, with 'option' tags, then add this to the select elements on the TimesheetData template. Then it is complete by this template being added to the TimesheetForm template, which it already does.
This might need a different method and might have been my fault that it don't work as I forgot to explain on the other question a out my client list.
Thanks,