FAQ Database Discussion Community


How to get reference to the ViewModel within a foreach data-bind?

knockout.js
In my ViewModel, I have an observable array and one element of this array can be the selected element: var ViewModel = function () { // the array this.fruits = ko.observableArray([{ name: "apple" }, { name: "orange" }, { name: "banana" }]); // the selected element this.selectedFruit = null; };...

How to trigger a function with textInput binding?

javascript,knockout.js
I'm using Knockout.js 3.3.0. In my viewmodel I have a lot of data rows that I present in a table with a foreach binding. In every row there is a text input that is bound to an observable. What I want to achieve is this: whenever the text changes, it...

Why is KnockoutJS not showing the same number of objects as my Web API controller?

knockout.js,asp.net-mvc-5,web-api
The solution was the same as in this question: How to get an observableArray's length? ...but the question itself is unique so anyone in the same situation will hopefully have an easier time finding the answer than I did. I'm fairly new to Knockout and to Web API. I've built...

breezejs EntityQuery fail

asp.net,knockout.js,breeze
I'm playing around with the breezejs knockout Todo-list tutorial/template (http://www.asp.net/single-page-application/overview/templates/breezeknockout-template). I decided to make a new Employees class and see if I could bind to a list of employees. The view references a variable in the VM 'results' which is supposed to be an observable array of employees. <section data-bind="foreach:...

How to nest data-bind Text

javascript,html,knockout.js
Really simple request, I want to print Product() in an <h4> and Price() in a <small> that exists within the <h4> <h4 data-bind="text:Product"> <small data-bind="text:Price"></small> </h4> results ignore <small> completely <h4 data-bind="html:Product() + '<small>' + Price() + '</small>'"></h4> works, but seems like there should be a better way https://jsfiddle.net/64wfpgn8/2/ any...

How to data-bind “mousedown” instead of “click” on an HTML button?

knockout.js
I have the following button that is currently using data-bind="click: ..." and I was wondering if it is at all possible to use "mousedown" instead of "click". <span style="cursor:pointer" class="button button--sm" data-bind="click: setVersion9, css: { 'button--primary': isVersion9Selected() }">Code Version 9</span> Currently when clicking the UI button, if the press and...

How to declare knockout component in typescript?

javascript,knockout.js,typescript
I am trying to follow example to create a component in knockout. http://knockoutjs.com/documentation/component-overview.html But I have to write a code in typescript. So how can I register component in knockout using typescript? What should I write in .ts file to convert it in something-like below. ko.components.register('like-widget', { viewModel: function(params) {...

How to maintain the jquery inputmask when the DOM is updated?

javascript,jquery,knockout.js,jquery-inputmask
Hard to describe. Here is a snippet. (function() { var PhoneNumber = function() { this.name = ko.observable(); this.phone = ko.observable(); }; $('[data-mask="phone"]').inputmask({ mask: '(999)999-9999' }); var vm = { newNumber: ko.observable(new PhoneNumber()), numbers: ko.observableArray([]), }; console.log('vm', vm.numbers()); vm.numbersJson = ko.computed(function() { return ko.toJSON(vm.numbers); }); vm.newNumberJson = ko.computed(function() { return ko.toJSON(vm.newNumber);...

Knockout - How to reset Dynamic observable array with new value

javascript,knockout.js,lazy-loading,observablecollection
I can't reset observable array with new value am using some lazy loading Technic. I can clear but can't reset, but it not allowing me to add new dynamic value. fiddle http://jsfiddle.net/kspxa8as/ js var i = 1; optionsProvider = function(self) { var self = self || {}; self.options = {};...

How to get attribute from actionlink

jquery,asp.net-mvc,razor,knockout.js
How can I get attributes from an ActionLink? I have this: <table> @foreach (var item in Model) { <tr> <td> @Html.ActionLink(item.Name, "Chat", "Home", new { id = item.ID }, new { @class = "Group" })<br /> </td> </tr> } </table> On the redirect page I need to get item.name Here's...

Run script after foreach list

javascript,knockout.js
I am using an external javascript library called Jarvismenu for my knockout app menu and in order to make the menu work (collapse/expand parent menu items when clicking on them) a script needs to be executed after the menu has loaded. The menu looks like this: <nav> <ul data-bind="foreach: reports">...

show validation message after user enters invalid value and focused out and then on keyup,using knockout validation

javascript,knockout.js,knockout-validation
I am using knockout validation to validate the data before updating in db. I am not so familiar with knockout validation. "valueUpdate" in data-bind for an input box is with "afterkeydown", for which, each time i am giving some invalid value the message is coming up. But I want to...

KnockoutJS custom binding cannot trigger update callback on observable change

javascript,knockout.js
When my observable array is changed, the update callback is not triggered. Please help. Here is my custom binding: ko.bindingHandlers.selectizeBinding ={ update: function(element, valueAccessor){ var value = valueAccessor(); var ords = ko.unwrap(value); alert(ords); }, init: function(){}, } My ViewModel is like this: function poReceivingModel(){ var self = this; self.order_id =...

show/hide elements dynamically using knockout

javascript,jquery,knockout.js,asp.net-mvc-5
I have a table which has four columns namely Code, Name, Quantity and Price. Out of these, I want to change the content/element of Quantity column dynamically. Normally, it should show the element with quantity displayed in it and when user click on element, I want to show the element...

Issue regarding add/update json data into observableArray knockout.js

jquery,json,knockout.js
I am learning knockout.js, so I'm trying to add a update json data into observableArray. I am showing json data in tabular format by knockout and this part is working. When I try to insert json data into the observableArray from our side then getting error AddNewData is not defined...

KnockoutJS foreach on individual element of nested array

javascript,knockout.js,foreach
I am on a project attempting to render search filter facets for a given query, but the rules are such that I cannot simply use nested ko: foreachstatements, as different result sets have different display rules for them. The object I am mapping looks as follows: FacetResults: ko.observableArray([ { Term:...

Why doesn't CSS transition get applied?

javascript,html,css,knockout.js
I've built a small stacked bar visual just using floated divs that underneath is bound to some data using knockout. What I want to be able to do is to animate changes in the size of these stacks when the data changes. I've managed to do this in the general...

Knockout js unable to bind data using observableArray

knockout.js,asp.net-mvc-5
I am trying to display all the employees in the database and I am unable to achieve it. My JS, var EmployeeKoViewModel = function () { var self = this; self.EmpId = ko.observable(""); self.Name = ko.observable(""); self.City = ko.observable(""); self.Employees = ko.observableArray([]); GetEmployees(); function GetEmployees() { $.ajax({ type: "GET", url:...

Knockout enable binding

knockout.js
Tried different methods to disable some textbox's on a binding: Here is a fiddle: http://jsfiddle.net/tonymaloney1971/jpswf04L/ What I am trying to do is when the user presses the + button is to disable all the textbox's on the previous row so they are not editable. I have tried intercepting the knockout...

knockout.js with kendo UI MultiSelect over MVC 5

javascript,knockout.js,asp.net-mvc-5
Currently I have the following code, MVC with knockout bindings (this works fine) @Html.DropDownListFor(m => m.profiles, (SelectList)Model.profileItems, new { id = "ID", data_bind = "options: Profiles_msl, optionsText: 'profiles', optionsValue: 'ID'" }) I also have this which is kendo UI with MVC model bindings (no knockout). This also works. @(Html.Kendo().MultiSelect() .Name("Profiles")...

How to access knockoutJS viewmodel from out side

knockout.js
I was trying to access KnockoutJS viewmodel from out side this way. My objective is to push data to KnockoutJS viewmodel from out side. function AddNewData() { //alert("add"); appViewModel.Stocks.push.apply(self.Stocks,NewData); ko.utils.arrayForEach(NewData, function(item) { //appViewModel.Stocks.push.apply(item); alert(item.Name); //appViewModel.Stocks.push(ko.mapping.fromJS(item)); }) } Here is my JSFiddle http://jsfiddle.net/tridip/62Ls6x9n/161/ which is doing nothing when clicking on add...

Checkbox to be checked on having value Y

asp.net-mvc,knockout.js
I have a checkbox bound to a viewmodel's observable property, whose value will be Y or N. I want the the checkbox to be checked when the value is Y and unchecked when the value is N. How to achieve this? I am able to achieve it if the value...

Knockout text binding showing the value

javascript,jquery,knockout.js
I am trying to text bind one element to a paragraph tag. It's not working properly and not giving any error in Browser. I am using Visual Studio for development. I created a fiddle for showing the problem and there i got the error that my binding is not defined....

Horizontal image list modules to be used wit KO.js and Bootstrap

jquery,twitter-bootstrap,knockout.js
I'm evaluating how to implement a UI with Knockout.js and Bootstrap. Basically, what I want to achieve is a horizontal list of images, (ideally scrollable) where each image also has an information frame. The list is populated from KO-observableArray. <div data-bind="foreach: thumbnails"> <span> <a href='#' data-bind='click: select '> <img width="120"...

Css negation giving type error

knockout.js,knockout-2.0
In my model I have self.isAssetForTradingEnabled = false; and when I try to bind it to add some style like this: <tr data-bind="css: { 'selected': quantity() > 0 , 'disabled': !isAssetForTradingEnabled() }"> Then Knockout gives a type error. It works if I change isAssetForTradingEnabled = true; and 'disabled': isAssetForTradingEnabled ...

knockout how to get $parent of $parent

jquery,knockout.js
<div id="root" data-bind="with: $data.Building"> <div data-bind="foreach: $data.Offices"> <div data-bind="foreach: $data.desks"> <div data-bind="foreach: $data.Legs"> <button class="btnDestroyDeskLeg"> Destroy</button> </div> </div> </div> </div> <script> $("#root").on('click', '.btnDestroyDeskLeg', function () { var context = ko.contextFor(this), Office = ** ? **, Desk = context.$parent, Leg = context.$data; }); </script> How can I get $Parent of $Parent?...

How can I add HTML to this Knockout.js Viewmodel variable? [duplicate]

javascript,html,knockout.js,knockout-components,knockout-templating
This question already has an answer here: HTML Entities with Knockout 1 answer I have a list of steps displayed on the page. Some steps (but not all) will have 1-3 substeps. I was thinking the simplest way of doing this was to just write the HTML manually within...

How to trigger ajax loading with an observable varariable in knockout?

ajax,knockout.js
I got some tabs in a page. When clicking on a tab, the currentTab changes its value, which should trigger an ajax loading of a new tab content. The concept is similar to a ko.computed, which however, only update another variable as the value change takes place. Is there any...

Unable to get property 'subscribe' of undefined or null reference

javascript,knockout.js
I am experiencing an issue with Implementing knockout Js while subscribing a dropdown value change in my HTML Page. Here is my HTML <div> <span>Request Types : </span> <select data-bind="options: requestTypes, optionsText: 'Name', optionsCaption: '--Select--', value: selectedRequestType"> </select> </div> While the ViewModel is as shown below wd.viewModel = function ()...

Trying to do color animation for TR by custom binding

jquery,knockout.js
I am trying to do color animation for TR by custom binding but things are not working as expected. I made some mistake because I am new in KnockoutJS. So please tell me in which area I need to fix in my code. The mistake is here AnimateRow : $parent.Hasfade()...

Notify that value changed in plain array

javascript,knockout.js
Currently I'm bound to plain array. Values of the array can be changed by external components. Is there any possibility to send notification that value has changed and re-render DOM tree? I can't use observables, thus valueHasMutated is not a solution, array is very large and contains lot of complex...

How to combine these two codes in knockout.js?

knockout.js
js and this is one of my first programs.I have two pieces of code in separate files and I don't know how to work these two pieces of code into one code.I know this looks pretty easy but me bieng a newbie , your help will be highly appreciated. //Knockout...

Knockout subscription insight: detecting if disposed

knockout.js,subscriptions,singlepage
I have a subscription management in my ko model, which saves any subscription by intercepting them and saving reference to them. I then dispose() them, but I need to understand sometimes if a sub is already disposed. Is the member Gb, a boolean of the subscription object, an active-inactive flag?...

knockout binding for datepicker with dynamic options

knockout.js,jquery-ui-datepicker
I am using knockout binding for jquerry date picker. refer http://stackoverflow.com/questions/6612705/jquery-ui-datepicker-change-event-not-caught-by-knockoutjs the same code is working fine except i cant set datepicker options dynamically. How to set datepicker option(like mindate max date etc) dynamically(button click) using the the above reference link....

knockout.js foreach $data AND $index()?

javascript,knockout.js
HTML You can see in the html I am calling editUser with two parameters. $data being the first parameter and $index() being the second. It should send the current user object in the first parameter and the index of the foreach loop as the second. <tbody data-bind="foreach: users"> <tr> <td>...

How to get the component's viewmodel from component's node in KnockoutJS

javascript,knockout.js
I have a component named 'my-component': ko.components.register('my-component', { viewModel: function() { return { title: 'title' }; }, template: '<div>x</div>' }); I'm using this component in the view like that: <my-component params=""></my-component> Is there any way to get the component's view-model related to this HTML node? ko.dataFor doesn't work: ko.dataFor($('my-component').get(0)) //...

Visible bind not updating after Observable change with Knockout

javascript,sorting,knockout.js
I´m creating a sortable table using Knockout. The table binding, the sorting functionality and Filtering is Working fine. However, I´d like to show a sorting icon when a specific column is active. Since the span has bind to visible property in the header array, and this property is observable, when...

Messages are not sent to groups signalr

javascript,asp.net-mvc,asp.net-mvc-4,knockout.js,signalr
having some troubles with messages in signalr, cant get working with groups, so it work when it have like this form: Clients.All.received(new { sender = sender, message = message, isPrivate = false }); In my project I've rooms, so when I'try to send messages to group they are not shown...

Populate Complex ViewModel in Knockout

javascript,jquery,knockout.js
Been trying to find an example of this but having no luck. Up until now, my use of KO has been limited to fairly basic tasks. Now I'm needing to load up a VM consisting of other models. Still trying to wrap my head around using the mapping plugin, but...

How to call a nested function from out side knockout js

knockout.js
i am learning knockout js. so still my understanding is not very clear. so apologized to ask this kind of question. see the code first to see what i am trying to achieve. here is jsfiddle link http://jsfiddle.net/tridip/vvdvgnfh/ <button data-bind="click: $root.printproduct()">Print Product</button> <table id="table1" cellspacing="0" cellpadding="0" border="0"> <tr> <th style="width:150px">Product</th>...

button click to set an optionsCaption value as default in knockout

knockout.js
I am currently working on options binding in knockout, the bindings is doing everything for me as per my requirement. But currently the problem I am facing is how to set optionsCaption Value again to my Select Box on a button click. Here is my code var clickMe = function(){...

Validation message not appearing

javascript,knockout.js,knockout-validation
On adding ko validation extender to dynamic objects it is not displaying the error message when showAllMessages() is called. There is also no span tag added below the respective controls which will show the error message. I also like to show the error message just below the control as soon...

Knockout dynamic