Questions tagged [knockout.js]
Knockout.js is an open source JavaScript library for dynamic HTML UIs using the Model-View-View Model (MVVM) pattern.
20,345
questions
0
votes
0answers
37 views
Computed returning value for the different viewmodel in knockout js
Here is my viemodel, simple as hell:
function collection_rate_vm() {
self = this;
self.rate = ko.observable(0);
self.rate_as_percent = ko.computed(() => {
return (self.rate() * 100)....
0
votes
0answers
14 views
How to force datepicker UI to have non-transparent background
I have this overlapping with datepicker-ui and some search bar behind it.
I would like to set white, non-transparent background to my dropdown dates sectrion, as well as the whole datepicker-ui ...
0
votes
0answers
15 views
getting total size of ArrayDataProvider
I am using a knockout computed function to update a list with a filter based on inputs from user. This list has some predefined data, and when the filter is applied, I want to know the size of the ...
0
votes
0answers
15 views
Why is my Knockoutjs Computed Observable Not Working when my Observable Array is being Sorted?
Background Info
I have an Observable array with three item details in it. Each item detail has the following properties; Item, Group, TotalQTY and InputQty. When the user enters the Input Quantity and ...
0
votes
1answer
20 views
Magento accessing jsLayout config data from a mixin
I want to extend the functionality of a knockout component. I have added the config to the xml file in question:
<arguments>
<argument name="jsLayout" xsi:type="array"&...
0
votes
0answers
17 views
How to show specific product additonal options in minicart magento2
I have custom product additional options in quote. By default all the options are visible in the mini cart but I want to display only specific ones.enter image description here
<div data-role="...
-1
votes
1answer
38 views
Filtering with nested arrays
I will give an example below that I am writing using knockout, but the logic works using standard js.
<!-- ko foreach: { data: ourWorks, as: 'item' } -->
<div data-bind="visible: $...
0
votes
0answers
18 views
Knockout fn. function to detect collection has settled
Hello and thanks in advance.
I have an observable array in which (after ajax request) I push a large number of class objects, many of which has computed variables etc., resulting in a delay.
Is it ...
0
votes
1answer
14 views
How to bind focusOut event to knockoutjs
I'm trying to bind focusout event to my knockout js. here is the example:
<div class="form">
<label>
Country:
</label>
<input type="text" ...
0
votes
0answers
22 views
Html and momentjs design problem - add spacing to elements with inline css
I have following code:
<div>
<input type="text" id="start" name="start" data-bind="datepicker: DateTimeFilterFrom,event: { change: applyChangeDate } &...
1
vote
0answers
65 views
Using blazor components outside of blazor app (eg. knockoutjs)
I am working on a migration project. I am the only JS Developer on the team, and rest everyone are C# developers.
We are looking to migrate our existing application written in .Net MVC Knockoutjs.
...
1
vote
2answers
31 views
knockout JS $parent object change its information inside for-each loop
I have a knockout js code in magento2 order summery detail page.
here is the code
<p data-bind="text:console.log('parent befor', $parent)"></p>
<!--ko foreach: { data: ...
0
votes
0answers
22 views
Knockout JS Validation of 2 Form Fields that are dependant on each other
var MyObjectModel = function(myObject){
var self = this;
self.string1 = ko.observable(myObject.string1);
self.string2 = ko.observable(myObject.string2);
}
I am very new to Knockout and am trying to ...
0
votes
0answers
17 views
How to add pagination to a table with dynamic data source?
I want to dynamically fetch data, when the particular page is clicked in the pagination bar at the bottom.
How to add pagination to a table with dynamic data source?
The pagination works with ...
0
votes
1answer
14 views
How to bootstrap dropdown button with click function in knockout
i have a button dropdown with options and it works as i want, but i need to remove te input circle image in options, is it possible?
or any other idea? thanks!
<div class="dropdown"&...
0
votes
1answer
88 views
Edit customer shipping address on checkout - magento 2
Wanted to know how to add edit field for the original shipping address which is provided under customer account and also edit the address properly. Have been checking the magento functionality and ...
0
votes
1answer
40 views
Refresh UI when object key value change - Knockout
sorry for a noob question, just started with Knockout.js. I have an array of objects and I want to update the view when object property favorite: changes but every time I click on an icon that ...
0
votes
1answer
30 views
model and ui out of sync after manipulating DOM with jQuery - knockout.js
I have the following 3 checkboxes where only one at a time can be selected:
<div class="radio-rows-wrapper" style="padding-top: 10px">
<input type="checkbox" ...
0
votes
0answers
17 views
Place search bar filters in a table made by knockout template
I have a table generated by a knockout template but I am not sure how to make changes to the table. I was able to successfully create searchable filters that visually sit above the table but I want ...
0
votes
0answers
22 views
How to put an input field into a knockout template
I have an input that is used to filter the columns in the table. This works but visually I want the input to appear inside the table. How my current code is written shows the input field above the ...
1
vote
2answers
54 views
Knockout js: Conditionally bind title attribute
I have several tabs at the top of the screen navigating users to several parts of the program.
One of those tabs should now be highlighted if that part of the program has urgent notifications for the ...
0
votes
1answer
29 views
Trigger change event of element created using knockout js through console
Below is inspect element part of combobox.
<select id="ddl-fund" aria-label="Funds" tabindex="0" data-bind="options: FundsAvailable, optionsText: 'Value', ...
0
votes
0answers
56 views
AJAX call from knockout.js function to controller action not setting server side view model properties
I have been following a pluralsight course in an attempt to learn how Client Side View Models can interact with server side controller actions.
I have a basic view model with a couple of string ...
1
vote
2answers
39 views
How to change font-color for inactive list item?
The html code looks like this and creates tabs at the top of the screen for navigation to several parts of the program.
<ul id="navigationMenuTop" class="nav navbar-nav" data-...
0
votes
1answer
20 views
KnockoutJs link only opens if i open on a new tab
I have a databinding below, which I can successfully right click and open on a new tab. But a normal click does not actually open that link. Anyone knows what I could be missing or doing wrong here?
I ...
0
votes
1answer
26 views
how to select all ID fields inside ko.observableArray([])
I have a list like this as ko.observableArray([])
And I just need to have all ID fields inside it
I coded this but I ran into some errors
self.ApprovePersonAttendanceDataList().ID()
and
self....
1
vote
1answer
38 views
Knockout title not updating with observable
I have a knockout binding with a function that should update the title depending on whether the page is in edit mode or not. The function seems to be working as expected, returning an empty string in ...
1
vote
1answer
35 views
Are there any potential issues when binding an "async" method to a "on" event (e.g. click)?
I have a sync method which is called via click in Knockout.js
I need to do some ajax calls for general purposes.
Now, I don't want to necessarily wrap by click logic in many curly braces, hence why I ...
1
vote
0answers
44 views
knockout: unable to update the observable array in knockout while binding to table
I am having two tables. In one table(parent table) I have options to add and delete rows in that one column is a dropdown column. based on the selection I need to load another table(child table) with ...
1
vote
1answer
37 views
eonasdan bootstrap: unable to increase hours using hour arrow icon
I am using Eonasdan datetimepicker version : 4.17.47 by importing this JS file in a project.
Also, I am using some custom validation to make sure that shows a red text when the user enters a time ...
0
votes
0answers
24 views
knockout losing model when pressing button for the second time
Got an old project in .net that needs few new features. We have a major problem with knockout somehow when pressing button for the first time everything works as it should, but when it is pressed for ...
0
votes
0answers
12 views
How is ko.utils.arrayPushAll(ObservableArray, SourceList) different in behavior than ObservableArray(SourceList)?
Given this:
let source = ["one", "two", "three"];
let target = ko.observableArray<string>(null);
I can do this:
ko.utils.arrayPushAll(target, source);
target....
0
votes
3answers
49 views
How to get li from a href value containing string
I've got the following html
<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
<li data-bind="css: ..." >
<a ...
0
votes
1answer
17 views
How to bind a collection of viewmodel in knockout
First of all, I'm quite new to knockout but I know the MVVM pattern it uses since I've done it in WPF a lot of time... by the way I've the following desiderata.
I need to populate a bootstrap grid ...
0
votes
1answer
36 views
Use a function on a option datading in knockout.js
I have this dropdown on knockoutjs
<p>
text
<select data-bind="options: optDiv,
value: ligaSelec,
optionsCaption: 'Divison' "></select>...
0
votes
0answers
21 views
knockout - header checkbox stays unchecked in table header when clicked
I am new to knockout and I am stuck at a problem for last couple of days - I am sure it is something silly but cant figure out. Any help will be appreciate.
I am trying to select and deselect all rows ...
0
votes
1answer
24 views
How to get value which is used for div visible condition in c# selenium
<div data-bind="css: resultClass, visible: model.ticketId() !== ''" id="result">
-------------
</div>
One of my html form page has div visible based on condition like ...
1
vote
1answer
22 views
KnockoutJs: observable array does not update, only when clearing and pushing items one-by-one
I have a knockout component (in my magento2 project) with a observableArray packageItems():
initialize: function (config) {
this.packageItems = ko.observableArray([]);
},
I also ...
0
votes
1answer
19 views
How to set "attr" binding element to not true?
I would like to know if it is possible to define a value that is not true in an attribute in this way.
<div data-bind="visible:isActive, attr: { 'aria-hidden': !isActive() })">
{ ...
0
votes
0answers
32 views
Knockout JS How to Access a Value from Second View Model / Binding
I am new to Knockout JS and think it is great. The documentation is great but I cannot seem to use it to solve my current problem.
The Summary of my Code
I have two viewmodels represented by two js ...
0
votes
1answer
21 views
How to use field value from subclass in overloaded function in constructor
The problem can be illustrated in this code:
class A
{
public readonly x;
constructor()
{
this.x = this.getX();
}
protected getX()
{
return "X";
...
0
votes
0answers
22 views
Import a Block into a Magento HTML file
In my Chekout_index_index.xml file, I have created a Block
<referenceContainer name="content">
<block class="Magento\Customer\Block\Form\Register" name=...
0
votes
0answers
92 views
form submit event listener not working on pages with data-binding
In my JavaScript code there is a form submit event listener added as follows:
form = document.querySelector('form');
form.addEventListener("submit", eventHandler, false);
function ...
0
votes
2answers
53 views
knockout check all checkboxes in table column
I am new to knockout and trying to implement a table with the first column as a checkbox. When I click the header the whole column should get checked / unchecked. At the moment, it works when I click ...
1
vote
0answers
36 views
How can I sort the results of a javascript fetch from a rest api to present data to knockout bindings?
I am fetching data from a rest endpoint in my node.js application.
w can I sort the results since I cannot modify the rest server to provide sorted data to begin with?
I have spent a lot of time ...
0
votes
1answer
24 views
Knockout observable updates reflected only in inner scope
I'm trying to update an Observable from within an Ajax callback using...
function LocaleVM() {
const self = this;
self.Language = ko.observable("en");
self.Strings= ko.observable(...
0
votes
0answers
27 views
JQuery Datatable with Select All Checkbox and Knockout
I have JQuery Datatable with checkbox functionality , in which the row and header elements are bound using knockout js. I'm fairly new to both of the concepts . I wish to implement a select all ...
0
votes
1answer
26 views
Knockout dropdown not updating after source array is updated
I have a dropdown that is populated from a view model's observable array. There is a button that is data-bound to a function that removes one of the elements from the array. When the button is clicked ...
0
votes
1answer
40 views
Why this polymorphic assignment does not work in typed observableArray in Knockout?
Let's have class A and subclass B. I want to assign an array of B's to array of A's. With normal arrays it works as expected, but with ko.ObservableArray it fails.
import ko from "knockout";
...
0
votes
0answers
14 views
KnockoutJS - Computed Observables don't bind to input
I have two model like this
function CMRSerialsEditViewModel(data) {
var self = this;
this.CMRDeliverySerialId = ko.observable();
this.CMRSerialNumberFrom = ko.observable();
this....