Knockout js: Viewmodel property not being bound - javascript

This is my fiddle. http://jsfiddle.net/aaScC/
Please check in the example, the Score property has 3.5 value but it is being displayed as 1. I know the score property is bound to dropdown value so its coming as 1. But i want 3.5 to be displayed. Please help.
var GoalsModel = function (goals) {
var self = this;
self.goals = ko.observableArray(ko.utils.arrayMap(goals, function (goal) { return new Goal(goal) }));
};

The problem is that you just make the select element invisible. You don't want the element at all. You can use bindings if or ifnot to control this.
Here is an updated example: http://jsfiddle.net/waxwing/aaScC/1/ . I wrapped the select inside a span to make it work, but you can also use virtual bindings if you don't like to change your DOM structure.

Related

Value of variable does not get passed on correctly

I have a checkbox on my webpage. Based on if the checkbox is checked the variable abc_test needs to be changed either to "wfOutput" or "_blank".
On initial load the variable has the value of "wfOutput" but for some reason the formTarget does not react to the changes based on the variable value. If I change the variable manually everything works and the formTarget receives the correct value.
<input id='runwindow' type='checkbox'>
var abc_test = "wfOutput";
$("#runwindow").change(function() {
if($(this).is(":checked")) {
abc_test = "_blank";
return;
}
abc_test = "wfOutput";
});
The abc_test variable is used in the following code example.
var ap = $("<div>").autoprompt(
{
wfdInfo:xmlInfo,
formTarget:abc_test,
}).autoprompt("instance");
Any ideas what I am doing wrong?
but for some reason the formTarget does not react to the changes based on the variable value.
When you do
var ap = $("<div>").autoprompt(
{
wfdInfo:xmlInfo,
formTarget:abc_test,
}).autoprompt("instance");
the value of abc_test is read and assigned to the formTarget property of the object created by the initializer. There is no ongoing connection between the object property and the variable afterward; changing abc_test later has no effect on the object property.
You'll need to call autoprompt to update the formTarget option from your change handler. Most plugins offer some kind of "update" method.

jQuery accessing updated values from variables on different events

I have a function which copies the values of a group of inputs to another group of inputs if the user clicks a button.
The function works fine but I'm having trouble with the vars I'm using to get the information. I want to use global variables because I want to use the same variables later on but it only works when I wrap those vars inside the function.
I've posted the two scenarios where it's working and not working below. Can anyone explain why I cannot access the correct value at that given time using a global variable?
EDITS: The 3 elements #admin-name, #admin-email and #admin-number are all present in the DOM when the script is called, as I am doing everything with document ready. I understand that when the script first runs these values will be blank because they haven't been filled out by the user yet. What I don't understand is why can't jQuery get the value once it has been filled out and I call the variable on the click function.
Not Working
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$(".step-two .copy-details").on('click', function(){
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Working
$(".step-two .copy-details").on('click', function(){
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Man I struggled with this one, this post helped flesh it out for me, jQuery Global Variable. The problem is the variable called in the click function was still getting the original value of 0. To make the variable update when a new value is added you need to declare it and then wrap it in a change function like so:
JS
// declare the variable
var contactName;
// wrap it in a change function so the value updates
$('#contact-name').on('change', function(){
contactName = $('#contact-name').val();
});
// use the variable inside the function and it will show the updated value
$('.step-two').on('click', 'button', function(){
$('#admin-name').val(contactName);
console.log('contactName = ' + contactName);
});

Polymer reset property

I use the [[]] binding in polymer. Their is a way/function to get the first Object as it was as rendered?
My problem is that I change the object in the element and then I want to reset the element to be as it was before the inside change.
I thought to deep copy the object but then it make problem with the polymer functions on the object.
<custom-elem item=[[item]]></custom-elem>
in original
item={a:123,b:234}
In the custom element I change the values of item to be
{a:241,b:382}
How can I get the original item inside the custom-elem?
Thanks.
I could think of two solutions
assign values as below
<custom-elem item-orginal=[[item]] item=[[item]]></custom-elem>
In your custom-elem when ever you want to reset the item call a function that will reset the value.
resetItem: function() {
this.item = this.itemOriginal
}
In your custom-elem, fire a custom event whenever you want to reset the value, like below.
resetItem: function() {
this.fire('custom-item-reset')
}
In the host, listen for this event and reset the item value.
<custom-elem id="customElem" item=[[item]] on-custom-item-reset="resetCustomItem"></custom-elem>
resetCustomItem: function() {
this.$.customElem.item = this.item;
}
Edit: The code is not formatting clearly. So made some modifications.

Binding text inputs to a directives attribute

I'm trying to bind a text input to an attribute within a directive, the reason being I don't want to have to introduce a controller each time I add a new directive of this type. Is this even possible or do you always have to specify a controller when using ng-model. Code example is worth a thousand words so please take a look at http://codepen.io/scottwio/pen/HKqiw . As you type in the input the amount should change.
There are two issues with your code:
scope.$watch(attrs.amount, function (v) {...}); <=>
scope.$watch('100', function (v) {...});
which is never going to change, so does not do what you want.
Since the elements attribute is never going to change, function draw(aniTime) { var amount = attrs.amount; is not so usefull.
You can fix them like this:
scope.$watch('amount', function (v) {...});
and
function draw(aniTime) {
var amount = scope.amount;
...
See, also, this short demo.
If you want to share the specified amount with the parent scope, then you need to set up a two-way data-binding and specify a property in the parent scope to bind to. E.g.:
// Parent scope
$scope.someAmount = 100;
// In HTML
<custommarc amount="someAmount" ...
// In directive
scope: {
amount: '='
...

Knockout.js: clear selection in select element

I need to clear the selection from a <select> element. I've already read such posts as Knockoutjs clear selected value in combobox and have tried the accepted answers, but those solutions don't seem to be working (don't know if something has changed in Knockout 2 since the answer was accepted?).
Here's an example view model:
var ClearSelectionViewModel = function () {
var self = this;
self.station = ko.observable();
self.selectedStation = ko.observable();
self.selectedStation.subscribe(function (value) {
self.station(value);
});
self.stations = ko.observableArray(['CLT', 'PHL', 'PHX', 'PIT']);
self.clearSelectedStation = function () {
self.selectedStation(null);
};
};
ko.applyBindings(new ClearSelectionViewModel());​
When the clearSelectedStation is invoked, the bound view model property should be set to null and this should be reflected in the UI by the bound <select> element appearing blank and expanding the list of options revealing no highlighted items. However, what I'm noticing is that if you try to set the bound value property (selectedStation) to anything not in the array of options (stations), the binding seems to be ignored.
This fiddle illustrates what I'm talking about: http://jsfiddle.net/sellmeadog/Su8Zq/1/
I don't want to "pollute" the options array with a blank value if I don't have to. I would like to know how to get the solution in the linked post to work.
One option would be to use the optionsCaption additional binding for the "not selected" value. It has to be set to something for it to be used, but you could set it to " ".
<select data-bind="optionsCaption: ' ', options: stations, value: selectedStation"></select>
Sample: http://jsfiddle.net/rniemeyer/Su8Zq/3/
Just add an 'optionsCaption', like this:
<select data-bind="options: stations, value: selectedStation, optionsCaption: '-- SELECT --'"></select>
Updated fiddle: http://jsfiddle.net/Su8Zq/2/

Categories

Resources