Changing the context with knockout js - javascript

I'm being lazy and just posting a link to my jsfiddle. I'm struggling with trying to get the context right. If you look at the fiddle and type anything into the input box it will render out a template with contacts. You can hover over them and Edit/Delete will appear, but when I click on them it doesn't work the way I want. I can get it to call removeContact() on the Contact object if I create that method, but that isn't what i want. I want it to call removeContact() on the viewModel, but the contact doesn't know about viewModel. Obviously I'm just playing around with knockout because it is very interesting. Anyone have any thoughts on how I can get edit and delete to call the removeContact/editContact methods on my viewModel object?
Thank you!
Here is the link again: jsfiddle

Fixed version: http://jsfiddle.net/AadrF/14/
Issues:
First you were using ${Id} to access the contact id inside the template. Javascript is case-sensitive so it should be ${id} (This comes from this.id in Contact constructor)
In the template, when you want to access the current object you use $data. You were using contact . Template doesn't know what the heck contact is. So you change viewModel.removeContact(contact) to viewModel.removeContact($data) . Same for edit contact.
Remove the var from viewModel declaration. Now theoretically speaking viewModel is global and should be accessed by knockoutjs too but I think it has something to do with jsfiddle.

Related

How do I access the current user with polymerfire in a child element?

I created a user and logged in, using <firebase-auth> (with code snippet below) in the main element, but I can only retrieve the user's information in that main element (and not a child element).
<firebase-auth
id="auth"
app-name="Carecollector"
provider="google"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
How do I retrieve information about the current user in a child element?
Should I create a <firebase-auth> element inside every other element that needs the current user information?
Just drop another firebase-auth anywhere you need to access the current user
Just as others have said, drop a <firebase-auth> in the child element you want to retrieve the user's information. Also add a property to the child element and use Polymer's data binding system to expose the property to your element. Suppose you want to access user data in a child element,
HTML:
drop <firebase-auth> in your element like this;
<firebase-auth user="{{currentuser}}"></firebase-auth>
SCRIPT:
<script>
Polymer({
is: 'your-element-name',
properties:{
currentuser: Object
});
</script>
Then you can get, for example, the user's displayName like this:
<div>[[currentuser.displayName]]</div>
That's it.
Ryan Tyler says "Just drop another firebase-auth anywhere you need to access the current user" and I voted it down because it just wasn't true!
I had proved that you DON'T have access to the user, through frequent bouts of testing and debugging to figure this one out. Undefined, null, anything but a user there!
Except he was right... and you'd never know it unless you set an observer on that property or something similar. Because the user value is populated when it is populated, and for a javascript newbie like me I never thought about that, and kept trying to access this before it was populated. Sometimes it takes a second or two.

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;
You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}

Call a Sub Window In Point Of Sale interface through button in Odoo

I need to ask if there is way to call a child window in the 'Point Of Sale' interface in Odoo-8. My scenario is that I have a button on the POS interface and I need to call sub/child window through that button . The window will have some buttons and some textboxes to take input from the user. I can show pop_up form with Error message on it. But I need to call a form with fields and button. Any help or guidance will be appreciated.
Thanks n Regards
You have to create widget for that.
So basically create one template file and js file to handle button click and other operations.
How to create widget and its basic: https://www.odoo.com/documentation/8.0/howtos/web.html
For example see pos_discount module.
Feel free to ask if any issue arises.
This can be done be making the button call a function which returns a ir.action.act_window.
Example from base_export_languages
return {
'type': 'ir.actions.act_window',
'res_model': 'base.language.export',
'view_mode': 'form',
'view_type': 'form',
'res_id': this.id,
'views': [(False, 'form')],
'target': 'new',
}
This will open a window with a model. You probably need to make a new model where you keep new data and views. Also you can specify view with 'view_id': view_id, but keep in mind that view_id must be a id as integer.
Hopefully this will be helpful to you.

How to programmatically add components or views inside other components/views in ember js

I have a component say {{component-1}} which gets called many times and creates a custom-texbox container and label as many times as it gets called.
Now whenever a user writes something in it a suggestion box should appear below it. Since the suggestion box can be reused everywhere i dont want to have a separate suggestion box for each {{component-1}}, rather i want to have another component called {{suggestion-box}} that gets inserted inside component-1 i.e. the textbox container.
I dont want {{suggestion-box}} to be inside dom at all since it is needed only when somebody types in it. I want to add/insert it into {{component-1}} when someone types. Instead of a component i even tried to use a view
Here are the different things i have tried and failed
Note:
suggestionBox is the component
textbox-container is an element inside {{component-1}}
Inside {{component-1}}this.$().find(".textbox-container").append(this.suggestionBox );where this.suggestionBox = suggestionBoxComponent.create(); I have event tried suggestionBoxView.create();It gives me the error that i one view cant be inserted into another and i need to use containerView
var tmp = Ember.Handlebars.compile('<div class=".suggestionBox"></div>');this.$().find('.textbox-container').append(tmp());I get the error called
Uncaught TypeError: Cannot read property 'push' of undefined
I even tried to use view instead of component i.e. make suggestionBox a view but then again i cannot insert one view inside another
I have tried a lot more things.
Few points:
I dont want alternate solutions of how textbox and suggestion box could be created
How to pass information from a component or a a template to a view? Say i do {{view "suggestion-box"}} inside component-1 template, how do i pass values to it? Say for components we pass in the context like this {{component1 sampleVar1=val1 sampleVar2=val2}}
i Want to know how to programmatically add a component or a view and if it is a view how to pass the data to it?
I dont want to use container-view since it will cause more complexities, however if your solution allows me to pass value from {{component-1}} to container-view and inturn pass it to corresponding childView1 and childView2 then that solution is acceptable
Just an update:
I even tried to use a view container inside the {{component-1}}
I also tried to use view block inside {{component-1}} i.e.
{{#view "view-name"}}
----earlier component elements here-----
{{/view}}
In both the above points "view-name" is a ContainerView which is getting inserted properly but the component element are not getting inserted
This can be achieved with a ContainerView and the viewName attribute. The component or view can access the ContainerView or any other view that is part of a template through its assigned viewName.
Example,
hbs
{{view Ember.ContainerView viewName="my-menu-container"}}
js - then from the component or view
this.get("my-menu-container").pushObject(suggestionBoxViewOrComponent);
http://emberjs.jsbin.com/yoyujeqi/1/edit
p.s. the context of the example is not relevant to the suggestion box, sorry about that, as it has been extracted from another answer related to adding a menu view dynamically.

Teleric MVC and knockout update values inside

I would like to use Teleric MVC components and knockout.
I found good example how to use it http://www.telerik.com/community/forums/aspnet-mvc/grid/compatibility-with-knockout.aspx
But i have a littel bit other task, when I change some value of knockout object inside of java-script function, teleric contol get this value but don't re-drow UI values. Teleric show new value just if user click on control. Does any one have any idea how to update teleric controls in my case ?
//Show selected information
function ShowKioskSettings(newDataFromAjaxcall) {
//general
viewModel.Somevalue = newDataFromAjaxcall.Somevalue;
ko.applyBindings(viewModel);
}
I findout solution, calling $("input:text").focus(); in the end of function. but any way it looks like Telerik issue.

Categories