So I have a view that create pie chart. Th recurring code looks like this.
function drawChart() {
var dataBest = new google.visualization.DataTable();
dataBest.addColumn('string', 'Name');
dataBest.addColumn('number', 'Number');
dataBest.addRows([
<ui:repeat value="#{dashboardController.bestSelling()}" var="sale">
[ '#{sale[0].prodId.prodName}', #{sale[1]}],
</ui:repeat >
]);
var options = {'title':'Best Sold Products', 'width':400,'height':300};
var chart = new google.visualization.PieChart(document.getElementById('test'));
chart.draw(dataBest, options);
}
And in my controller called DashboardController I have:
public String bestSelling() {
List<Sales> bestSelling = saleService.getBestSellingProduct(country,gender,status,income);
return new Gson().toJson(bestSelling);
}
But, when I go on my page, I have the following error:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}": The class 'com...managedbean.DashboardController' does not have the property 'bestSelling'.
I don't understand what I did wrong there.
You're not running the code you think you're running. Look at the error message:
/faces/all.xhtml #22,83 value="#{dashboardController.bestSelling}
It mentions the method without the parentheses. So, you've apparently added it later in, but the webapp project is not properly been saved/cleaned/rebuilt/redeployed/restarted.
Unrelated to the concrete problem, there's many more wrong with this approach (attempting to use <ui:repeat> to iterate over a Java String as #1 thinking mistake), but you'll experience this as soon as you fix the current problem. Hint: JSF is a HTML code generator and JS is part of that HTML.
Related
I have a dart-polymer component mediator-form that I would like to add programmatically to another component. That I have done successfully. However, mediator-form is used several times. For my purpose I would like to pass #published data in the form
<mediator-form mediator='Medication'>
where the published mediator data is used.
My problem is I don't know how to set the mediator='Medication' programmatically.
My attempt is shown below
.html
<link rel='import' href='mediator_form.html'>
.dart
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
does not work. newElement does not have a setProperty() method so it does not seem possible.
Any help is appreciated. Thanks.
This should work
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
maybe it only works after you added it to the DOM (haven't tried myself this way).
This should also work:
var newElem = (new Element.tag('mediator-form') as MediatorForm)
..mediator = 'Medication';
If it doesn't you probably haven't imported the element.
You can set value directly on dart object, but to have that object you have to wait at least one cycle of event loop to give polymer a chance to instantiate your object in a DOM:
document.body.append(new Element.tag("mediator-form"));
// Delaying the following after element is instantiated
Timer.run((){
MediatorForm form = document.body.querySelector('mediator-form');
form.mediator = "Medication";
});
I'm having trouble with a knockout model that is not binding on a subscribed update. I have a C# MVC page that delivers a model to the template which is parsed to Json and delivered raw as part of a ViewModel assignment for ko.applyBindings. I have a subscription to an observable that calls a method to perform an update of the viewModel's data. Irrelevant stuff pulled out and renamed for example usage:
var myViewModel = function (data) {
var self = this;
self.CurrentPage = ko.observable();
self.SomeComplexArray= ko.observableArray([]);
self.Pager().CurrentPage.subscribe(function (newPage) {
self.UpdateMyViewModel(newPage);
});
self.UpdateMyViewModel= function (newPage) {
var postData = { PageNumber: newPage };
$.post('/Article/GetMyModelSearchByPage', postData, function (data) {
ko.mapping.fromJS(data, {}, self);;
});
};
When I perform logging, I can see all of the data, and it all looks correct. The same method is used to produce both the initial model and the updated model. I've used this technique on other pages and it worked flawlessly each time. In this case however, I'm looking for it to bind/update SomeComplexArray, and that's just not happening. If I attempt to do it manually, I don't get a proper bind on the array I get blank. I'm wondering if there is something obvious that I'm doing wrong that I'm just flat out missing.
Edit: I don't know that ko.mapping can be pointed to as the culprit. Standard model changes are also not affecting the interface. Here is something that is not working in a bound sense. I have a p element with visible bound to the length of the array and a div element with a click bound to a function that pops items off of SomeComplexArray. I can see in the console log that it is performing its function (and subsequent clicks result in 'undefined' not having that function). However, the p element never displays. The initial array has only 2 items so a single click empties it:
<p data-bind="visible: SomeComplexArray().length === 0">nothing found</p>
<div data-bind="click: function() { UpdateArray(); }">try it manually</div>
-- in js model
self.UpdateArray = function () {
console.log(self.SomeComplexArray());
console.log(self.SomeComplexArray().pop());
console.log(self.SomeComplexArray());
console.log(self.SomeComplexArray().pop());
console.log(self.SomeComplexArray());
});
Edit 2: from the comment #Matt Burland, I've modified how the pop is called and the manual method now works to modify the elements dynamically. However, the ko.mapping is still not functioning as I would expect. In a test, I did a console.log of a specific row before calling ko.mapping and after. No change was made to the observableArray.
I created a test of your knockout situation in JSFiddle.
You have to call your array function without paranthesis. I tested this part:
self.UpdateArray = function () {
self.SomeComplexArray.pop();
};
It seems to be working on JSFiddle side.
I'm not really sure why, but it would seem that ko.mapping is having difficulty remapping the viewmodel at all. Since none of the fields are being mapped into self my assumption is that there is an exception occurring somewhere that ko.mapping is simply swallowing or it is not being reported for some other reason. Given that I could manually manipulate the array with a helpful tip from #MattBurland, I decided to backtrack a bit and update only the elements that needed to change directly on the data load. I ended up creating an Init function for my viewModel and using ko.mapping to populate the items directly there:
self.Init = function (jsonData) {
self.CurrentPage(0);
self.Items(ko.mapping.fromJS(jsonData.Items)());
self.TotalItems(jsonData.TotalItems);
// More stuff below here not relevant to question
}
The primary difference here is that the ko.mapping.fromJS result needed to be called as a function before the observableArray would recognize it as such. Given that this worked and that my controller would be providing an identical object back during the AJAX request, it was almost copy/past:
self.UpdateMyViewModel= function (newPage) {
var postData = { PageNumber: newPage };
$.post('/Article/GetMyModelSearchByPage', postData, function (data) {
self.Items(ko.mapping.fromJS(JSON.parse(data).Items)());
});
};
This is probably not ideal for most situations, but since there is not a large manipulation of the viewModel occurring during the update this provides a working solution. I would still like to know why ko.mapping would not remap the viewModel at the top level, but in retrospect it probably would have been a disaster anyway since there was "modified" data in the viewModel that the server would have had to replace. This solution is quick and simple enough.
I have taken the codes shared from the Modal example page and instead of an LI I have decided to use a select element. My select element has ng-model="selectedColor" in it, and I can use {{selectedColor}} all over the partial I created, however, I can not use "$scope.selectedColor" from the "Model Instance Controller" or any controller for that matter. I assume this is because something is off with $scope but I cant seem to figure it out. Any help is appreciated.
http://plnkr.co/edit/MsNBglLJN0hWxvGZ1pj1?p=preview
The problem in your code is that $scope.selectedColor and the selectedColor in the modal markup are two different references. For details on this, please read Understanding Scopes, you will probably benefit from it as it is a common task.
Instead of writing $scope.selectedColor, you should make an object in your controller, then store the result in it.
var ModalInstanceCtrl = function ($scope, $modalInstance, colors) {
$scope.colors = colors;
$scope.o = {}
$scope.ok = function () {
console.log($scope.o.selectedColor, "$scope.o.selectedColor");
$modalInstance.close($scope.o.selectedColor);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
and in the markup, refer to o.selectedColor.
Here is a working version of your Plunker
I am 3 months into learning KnockoutJS and it has been great so far. However, I am facing an issue with binding.
This is the scenario:
I am using MVC with KO.
MVC model is passed down to the view, converted into a knockout object and pushed into the viewModel variable:
var data = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
var viewModel = new HP.ViewModels.CertificationPathViewModel(data);
ko.applyBindings(viewModel);
Within viewModel, I reference the MVC model as self.data:
ViewModels.CertificationPathViewModel = (function (data) {
var self = ViewModels.BaseEntityViewModel.apply(this, [data]);
// some other code
return { Data: self.Data, };
}
ViewModels.BaseEntityViewModel = (function (data) {
var self = this;
self.data = ko.observable(data);
// other code
return { Data: self.data, };
}
On the view, I data-bind like this:
<div id="drpControl" data-bind="CustomDropdown: Data().BusinessUnits.SelectedGroup, optionSettings: { CustomOptions: Data().Units.Groups, CustomOptionsCaption: '-- Select Group --' }"></div>
I try to update the self.data after an ajax call. I return the entire MVC model object and attempt to replace self.data like this :
self.data(updatedModel)
My expectation is that KO will take care of the update and no extra binding is needed. It works great for simple binding (ex. Value: Data().Something) but it doesn't work for complex binding (ex. value: Data().BusinessUnits.SelectedGroup ).
The controls that have complex binding are still bound to the old model, so KO doesn't know what to pass back next time I submit an ajax request.
Is this a limitation of KO, or I am not doing something properly?
Thanks
the ko.mapping plugin changes every property on self.data into an observable. During your update, you need to remap the updated data.
Since you didn't actually post your code, just unformatted snippets I can't help a whole bunch, but you should start by changing this line: self.data(updatedModel) to this:
ko.mapping.fromJS(updatedModel, self.data);
see the Knockout.JS mapping documentation
Protip for stack overflow - include your full code, to the extent that it's possible. Also, if you can, make a jsfiddle that reproduces your problem.
I have a page made of custom components. In that page I have a button. If I click the button I have to call another page (page.mxml consisting of custom components). Then click event handler is written in Action-script, in a separate file.
How to make a object of an MXML class, in ActionScript? How to display the object (i.e. the page)?
My code:
page1.mxml
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"
/>
This page1.mxml has to call page2.mxml using ActionScript code in another class:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
Your Actionscript class needs a reference to the display list in order to add your component to the stage. MXML is simply declarative actionscript, so there is no difference between creating your instance in Actionscript or using the MXML notation.
your function:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
could be changed to:
static public function logout():StartSplashPage {
return new StartSplashPage();
}
or:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
}
If your actionscript does not have a reference to the display list, than you cannot add the custom component to the display list. Adding an MXML based custom component is no different than adding ANY other DisplayObject to the display list:
var mySprite:Sprite = new Sprite();
addChild(mySprite)
is the same as:
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
Both the Sprite and the StartSplashPage are extensions of DisplayObject at their core.
You reference MVC in the comments to another answer. Without knowing the specific framework you've implemented, or providing us with more code in terms of the context you are trying to perform this action in, it is difficult to give a more specific answer.
I assume that you are on a page with a set of components and want to replace this set of components on the page with a different set of components. My apologies in advance if this is not what you are trying to do.
You can do this using ViewStacks and switching the selected index on selection -- this can be done either by databinding or by firing an event in controllers.AdminSession.logout() and listening for that event in the Main Page and switching the selectedIndex of the view stack in the handler function.
MainPage.mxml
<mx:ViewStack>
<views:Page1...>
...
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"/>
</views:Page1...>
<views:Page2 ...>
...
<comp:Comp1 .../>
<comp:Comp2 .../>
</views:Page2>
I think you may use state to do you work.
You may take a look at http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/#more-221
Edit:
I am not sure I fully understand your case.
As I know, you may make a new state in page1.mxml, and name it, eg. secondPageState, and then put the custom component page2.mxml in the secondPageState.
In the controller, you need an import statement to import the page1 component and make a public var for the page1 component, eg. firstPage.
Then, the code will similar to:
public function logout():voild
{
firstPage.currentState = "secondPageState";
}
Another solution:
If you don't like the change state solution, you may try to use the addchild, to add the custom component to your application.