FAQ Database Discussion Community


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

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

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

How to make relation between two control using knockout js

knockout.js
i have one drop down with data and i want when drop down data will be changed then drop down text should be populated in div. i have done but code not working as per expectation. Full Code <select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItem"></select> <div data-bind="text: selectedItem"></div>...

Loop viewmodel display pattern images on select change

javascript,knockout.js,knockout-mvc,knockout-3.0
I am loading 3 selects with the following model: var viewModel = function(){ var self = this; self.makes = [ {id: 1, name: 'Northwoods Prestige'}, {id:2, name: 'Forest Bay'}, {id:3, name: 'Timberland'} ]; self.types = [ {id: 1, make:1, name:'Special Reserve 138', patterns:['11.jpg','12.jpg']}, {id: 2, make:1, name:'Special Reserve II', patterns:['13.jpg','14.jpg']},...

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

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

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

Mapping a JSON object to a knockout array using mapping plugin

javascript,jquery,knockout.js
function PanelViewVM() { var self = this; self.PanelName = ko.observable("Test"); self.PanelDetails = ko.observableArray([]), self.SelectPanel = function () { $.ajax("/DPanel/FillIndex", { dataType: 'json', contentType: 'application/json', success: function (data) { ko.mapping.fromJS(data.PanelDetails, {}, self.PanelDetails); }, error: function (data) { console.log(data); } }); }; self.SelectPanel(); }; ko.applyBindings(new PanelViewVM()); JSON ajax response is: { "PanelDetails":...

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

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

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

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

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

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

Getting error regarding calling a custom function from binding formatCurrency()

javascript,knockout.js
Error message is ReferenceError: formatCurrency is not defined here is my jsfiddle http://jsfiddle.net/tridip/3bu6nybk/ please some one see my jsfiddle link and tell me why i am getting this error message Error message is ReferenceError: formatCurrency is not defined formatCurrency is defined in same place function formatCurrency(value) { alert(value.toFixed(2)); return "$"...

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

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

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

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

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

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

When to use different approaches for data binding?

knockout.js
Here I have two JSFiddle links; the code in both links is doing the same thing, more or less, but their data binding approach is different. 1) First JSFiddle link: if anyone looks at the code from this fiddle, they'll notice how they bind data: <table id="table1" cellspacing="0" cellpadding="0" border="0">...

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

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

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

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

DukeScript: How do native calls into JavaScript work?

knockout.js,dukescript
I'm struggling to understand how "native method" calls in DukeScript work. In particular, the ones where no body is specified in the @JavascriptBody annotation. For example: @JavaScriptResource(value = "userEntryComponent.js") public final class UserEntryWidget { private UserEntryWidget() { } @JavaScriptBody(args = {}, body = "") public static native void registerComponent(); }...

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

Why my applyBindings doesn't work? Knockout

javascript,knockout.js
Hello I am trying simply to create input and iframe and when I paste the YouTube link the iframe should change with the new src. I have done this so far <div class="heading">id <input data-bind="text: youtubeLink"/></div> <iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: linkEmbed }"></iframe> And in the...

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

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

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

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

Binding html to ko-observables.

knockout.js
In this example <strong>Test:</strong> <span data-bind="text: currentResult()? currentResult().test_name : '' " /><br/> <strong>SampleId:</strong> <span data-bind="text: currentResult()? currentResult().sample_id : '' " /><br/> I see only one text - only the first: Test: <test_name> If I exchange the lines, I see only SampleId:<my sample id> It is not because of height limits....

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

Changing EventSouce event name not working in asp.net

javascript,c#,asp.net-mvc,knockout.js,server-sent-events
i have an asp.net mvc application with knockout.js i'm using HTML5 EventSource for push messages c# private static void UpdateOnlineUsers() { var ou = Clients.Select(c => new { UserName = c.User.Name, Time = c.DateTime.ToString("G") }).ToList(); Clients.ForEach(c => { c.Stream.WriteLine("data:" + new JavaScriptSerializer().Serialize(ou) + "\n\n"); }); } and javascript is eventSource.addEventListener('message',...

How to use current object in a computed observable? — Knockout.js

javascript,jquery,knockout.js
I have a foreach data-binding on an array. I want to access the current object or place in the computed observable (as it happens with the click data-binding). Example: Here is my View: <tbody data-bind='foreach: items'> <tr data-bind="attr: {class:$root.changeClass()}"> <td data-bind='text: name'></td> </tr> </tbody> And, here is the view-model: function...

Mapping not working with api call

knockout.js,knockout-mapping-plugin
I want to make all inner employee properties as observable so I've tried the knockout mapping plugin. However, after using it data is not getting bound properly. Here is the javascript code: var employeeViewModel = new function () { var self = this; self.employees = ko.observableArray(); self.loading = ko.observable(true); }();...

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

Dragstart event breaks the sequence

javascript,knockout.js
Below is my code: <body> <table border="1"> <tbody data-bind="foreach: $root.list1"> <tr data-bind="event:{dragstart: $root.dragStart, dragend: $root.dragEnd}" draggable="true"> <td data-bind="text: Id"> </td> <td data-bind="text: Name"> </td> </tr> </tbody> </table> <table border="1" data-bind="event:{drop: $root.dragDrop, dragover: $root.dragOver}"> <tbody data-bind="foreach: $root.list2"> <tr> <td data-bind="text: Id"> </td> <td...

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

Knockout JS Validation not working

javascript,asp.net-mvc,knockout.js
I am a newbie in Knockout JS. i want to apply validations in KO. i have used plugin knockout.validation.min.js . I have implemented it like this but not working My View Model $(document).ready(function myfunction() { ko.applyBindings(new EmployeeKoViewModel()); }) var EmployeeKoViewModel = function () { var self = this; self.EmpId =...

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

Knockout - How to keep template inputs in sync with observable array when adding?

javascript,knockout.js
I am using a foreach template with knock out. I have a binding in my page <div data-bind="template: { name:'myList', foreach: viewModel.myList}</div> In my template, I have an attr binding on an input: data-bind="attr: { value: $data.Desc }" viewModel.myList.push(listItem); I then convert my view model to JSON: var json =...

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

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

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

Knockout dynamic