FAQ Database Discussion Community


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...

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:...

knockout js css biniding doesn't save changes

javascript,knockout.js
knockout js css biniding doesn't save changes after div's class was changed: My model contain 2 properties: man: '', woman: 'active' And I have 2 element in dom, which classes can be changed. <input type='button' value='Is MAN?' class='' data-bind='css: man'> <input type='button' value='Is WOMAN?' class='' data-bind='css: woman'> I want to...

KnockoutJS cannot perform value binding with select

javascript,knockout.js
My ViewModel is like this: $(document).ready(function () { vm = new poReceivingModel(); ko.applyBindings(vm); }); function poReceivingModel(){ var self = this; self.order_id = ko.observable() } And my html is like this: <select id="id_po" class="form-control" name="po" data-bind="value:order_id"> <option value="1">4323</option> <option value="2">1234</option> </select> <h1 data-bind="value: order_id">It is</h1> When I select option of the...

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...

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()...

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...

How to reference an element that is altered by knockout component?

javascript,knockout.js,requirejs,dropzone.js
I'm trying to build a reusable Knockout.js upload component that consists of a Dropzone.js instantiation on a form element. AMDified Knockout Upload component: define(['knockout', 'dropzone', 'jquery', 'text!components/upload/upload.html'], function(ko, Dropzone, $, htmlString) { function UploadViewModel(params) { var self = this; self.dropzoneId = ko.observable(params.dropzoneId); self.postLocation = ko.observable(params.postLocation); Dropzone.options.uploadedFilesDropzone = { // Dropzone...

Change CSS of element in after Move event of Knockout sortable

css,knockout.js,knockout-sortable
I want to change the CSS of an element once it is dragged and dropped (afterMove event) to a container using the knockout sortable library. I tried getting the ID of the div containing the element and modifying its CSS in the afterMove event as: document.getElementById('container').style.backgroundColor="yellow"; The above code does...

How to implement custom sort for koGrid?

javascript,sorting,knockout.js,typescript,kogrid
Data: 16.00 hours 19.99 hours 210.46 hours 262.54 hours 303.19 hours 55.95 hours 60.07 hours 64.07 hours 7.95 hours What I want: I need to allow sorting for this king of data in koGrid (default feature by clicking grid header, asc or desc sort). Problem: The data is string so...

Knockout - change an object's 'subclass' by setting a property on it

javascript,knockout.js,subclass
In Knockout, I have an array of Setting entities which may be of different types (i.e. 'subclasses' of the Setting entity). These types are dynamic, they may be changed by the user in the UI. Depending on what type the Setting entity is, it requires different object properties, and makes...

KnockoutJS custom component loader not executing `loadViewModel`

javascript,knockout.js,requirejs,knockout-components
Context I have been fiddling around and trying to create my own (just another) SPA framework. In this framework I've been trying to create a custom component loader to be able to do some dependency injection 'n stuff on the viewModels I'm loading. Used KnockoutJS version: 3.3.0 Problem The loadViewModel...

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?...

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...

Knockout.js: Filter array on subscribe

javascript,knockout.js
I have an observableArray that in its subscribe callback I need to filter the new array passed. For example: myArray.subscribe(function(elements) { ko.utils.arrayFilter(elements, function(element) { return element.x > 10 }) }) This, of course, doesn't work since arrayFilter nor the native filter() method doesn't change the original array. The problem is...

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 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...

Updating individual fields in an ejGrid with Knockout.js

javascript,jquery,knockout.js,syncfusion
The grid widget ('ejGrid') in the Syncfusion Essential JS library supports Knockout.js, however it only appears to work when the data source is an observable array of plain objects. How do I make it work if the data source is an observable array of view models? For example: var Order...

Is it possible to inherit ko.computed to a prototype class?

javascript,knockout.js,observable
Let's say that I wish to have the behaviour a ko.computed has with: read write but I want to have an internal observable inside that ko.computed property, something like: this.a = ko.computed(function() { value: ko.observable(null), read: function() { return value; }, write: function(newValue) { if (newValue) { value(newValue); } }...

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; };...

Creating AJAX call with foreach data values

jquery,ajax,knockout.js
I basically have a list of 'form data' which each contain an attribute. Each attribute has their own separate data such as ID, QuestionText etc. Below I have my HTML with my data binds for pageitems and then I am setting the 'attributeid' as the id for the table, which...

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 ()...

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?...

General function for observable array search

knockout.js
is there a way to do a general function for search an observable array and if the value found then set that object to another observable .? this question relate to Knokout select : Set Selected Item by item name not value so far i have tried self.getOptionByName = function(instance,opt,name){...

Update Knockout Observable string in refresh function

javascript,knockout.js,typescript
The code is in typescript and I am trying to show current date time on page load and update that date time on refresh click. In .ts file string that shows date time is declared like this. asOfString: KnockoutObservable<string>; In the constructor it is being set like this, this.asOfString =...

Why one property is not getting observable knockout.js

knockout.js
Here is my full code. When I run the program it is working but when I change the quantity value then subtotal is not getting changed. If possible, could someone please go through my code and tell me which area I need to fix in the code? Full Code <table...

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...

Knockout data-bind doesnot work on div element [closed]

knockout.js
I am following one of the tutorials of knockout The code works fine when i bind "foreach:lines" to "tbody" element. However, if i try binding "foreach" to a div element, it fails and throws an error. working code <tbody data-bind="foreach:lines"> <tr> <td width="25%"> <select data-bind="options:$parent.products,value:product,optionsText:'shortDescription', optionsCaption:'Select a product ...'"></select> </td>...

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"...

Is new line a separator in Javascript

javascript,google-chrome,knockout.js,google-chrome-devtools,knockout-2.0
While debugging a web SPA issue, I stumbled on something to which I could not find concrete references online: missing comma separator between function expressions in javascript. Here's the details: This works - explicit comma as a separator is there (note - intentionally on one line): var f1 = function()...

change max-height by clicking collapse button

javascript,css,twitter-bootstrap,knockout.js
Have the following puzzle: there are two tables on the page and a button. the table1 is shown at once and table2 is shown with the help of button toggle. The idea is that clicking the button causes not only expanding of table2 but should change the max-height of table1...

Disable select2 dropdown with knockout binding?

javascript,jquery,asp.net-mvc,razor,knockout.js
I have an MVC Razor project and in my view i have one Html.TextBoxFor with data-bind="disable: setRoot". This input is used by Select2 jquery plugin. My problem is that the disable binding is not working properly. This is my code: <div class="control-label">Category</div> <div class="input-group"> <div class="input-group-addon"><label><input data-bind="checked: setRoot" type="checkbox"> root</label>...

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...

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...

DukeScript: how to access the Java model from the JavaScript context?

knockout.js,dukescript
This is related to 1 and 2. I've read the excellent documentation "Using the Knockout API". That explains how the context is set of a specific widget with knockout bindings. Now I'd like to be able to access Java models from the Firebug command line, as I would normally do...

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>...

Issue with Syncfusion ejGrid and knockout.js when displaying summary rows

javascript,knockout.js,syncfusion
I'm having issues using Syncfusion ejGrid and knockout.js when displaying group summary values and either starting with an empty grid or when adding elements to an existing grid dynamically. Grid setup: <div id="Grid" data-bind="ejGrid: { dataSource: dataSource, allowGrouping:true, allowSorting:true, columns: [{ field: 'OrderID', headerText: 'OrderID' }, { field: 'CustomerID', headerText:...

What is difference between Init and update function of knockout js custom binding

knockout.js
i like to know what is difference between Init and update function of knockout js custom binding ? when we should write code inside init function and when we should go for update function of knockout js custom binding. i go through knockout js doc but still my understanding for...

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...

When I click a checkbox in a knockout table row, the tr click event overrides the checkbox state change

javascript,checkbox,knockout.js
I have a knockout table with checkboxes (for the example here, I've limited to one checkbox per row). when a checkbox is clicked, it should flip state (as you expect). however, I also have a click event and select event on the table row, which is conflicting with the checkboxes......

Clicking on an input[checkbox]'s label will fire twice the parent's click event (knockout)

javascript,knockout.js
Consider this fiddle. I have an <input type='checkbox'> linked to its corresponding <label>. On their parent, I have a click binding. The problem is, clicking on the <label> will trigger the parent's click twice, whereas clicking on the <input> will trigger it only once. Considering I want to keep the...

Knockout- How to check if item in the loop exist while binding

jquery,knockout.js
I've below HTML where I bind my array with a foreach data binding. <table> <tr> <th>index</th> <th>fajr</th> <th>zuhr</th> <th>asr</th> <th>maghrib</th> <th>isha</th> </tr> <tbody data-bind="foreach: prayerData"> <tr> <td data-bind="text: index"></td> <!-- Display the current row --> <td data-bind="text: fajr"></td> <td data-bind="text: zuhr"></td> <td data-bind="text: asr"></td>...

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>...

In a table which is data bound using knockout how to dynamically select any column values from view model

jquery,knockout.js
I've a view model which I am binding to the view- JSFiddle link to the code- http://jsfiddle.net/piyush4bpl/9kq2t5xu/ In the view model, I've two arrays- grid, kpis I am binding 'kpis' in to drop downs options. 'grid' is an array which has 4 properties named as 'Promoters', 'Positive', 'Negative', 'Neutral'. 'kpis'...

Automatically call a click handler to load a jQuery dialog box on page load

javascript,jquery,knockout.js
I've got a page, on the page there is a button wrapped in an anchor tag: <a href="javascript:void(0)" data-bind="click: AddNewThread, text: 'Add New Discussion'" class="btn new"></a> This calls a function labeled as AddNewThread, now this function opens up a dialog Box using jQuery, and in the dialog box there is...

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) {...

WHY does it initialize this Knockout.js component in random order?

javascript,html,knockout.js,knockout-components,knockout-templating
I am beyond confused... I am creating a list using Knockout.js components, templates, and custom elements. For some reason, the steps I create in my Viewmodel are being initialized in random order within the custom element definition! And it is completely randomized so that it is different each time! To...

Observe MyArray().length knock out

javascript,knockout.js
Is it possible to store length on an observable array in an observable variable and bind this to the view, something like this? self.MyArray = ko.observableArray([]); self.MyArraylength = self.MyArray().length; //Bind in view self.Observelength = ko.observable(self.MyArraylength); When I alert MyArray length it seems to update proper, but cant get it to...

How to capture table row on button click to add css class knockout js

css,json,knockout.js
i have table with data and data populated by knockout js foreach bind. i would like to know how to access specific table row's data when it gets updated. if i could access table row then could add css class to that tr. my objective is to do bit color...

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...

Passing a constant or parameter to the data-bind click function in KO.js

knockout.js
I want to implement a menu. Each button in menu should set the menu ID in the model. I tried to do it this way, but it doesn't work: <a class="btn btn-primary btn-large" data-bind="click:selectUi('menu'),visible:sessionId()!=''"> Menu </a> Instead the selectUi is called when the page loads. The only possible solution which...

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...

My sample shopping cart is not working as expected knockout js

jquery,knockout.js
I am learning knockout.js. So I'm try to build a sample cart where initially a drop down will come with product data. When user select any product then corresponding price and quantity will be filled up in right input control and sub total will be calculated automatically by computed property....

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">...

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 dynamic