w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » KNOCKOUT JS » Page 1
Data-Binding issue with KO.js on modal control
Your fiddle was excellent in diagnosing the issue - http://jsfiddle.net/88rafcfk/1/ - there is an updated one. It appears your code was working fine except for a single change I made - you had document.GetElementById instead of document.getElementById. When I changed this everything worked fine.

Categories : Knockout Js

Combine 2 selects into 1 select using KnockoutJS
In javascript: var select1 = $('#select1'), select2 = $('#select2'), // create an array to bind options = ko.observableArray(); // this value doesn't exist in the dom options.push('Select 1'); // add the text of all children to the array select1.children().forEach(function(i, el) { options.push(el.innerText); }); // this value doesn't exist in the dom options.push('Select 2');

Categories : Knockout Js

requirejs w/ knockoutjs w/ select2 fails to update observable on first load
I use custom binding handler for select2 (in the bootstrap environment): <div data-bind="selectbox: { value: selectedValueId, values: values || [{id: 1, text: 'text'}], lookupId: 'id', lookupText: 'text', mode: 'id' }"/> In spite of it may seems too complex, I post custom binding code here: ko.bindingHandlers["selectbox"] = { init: function (element, valueAccessor, allBin

Categories : Knockout Js

Databinding a D3 slider with Knockout
Try putting all the logic of the slider in the slide bindingHandler. Your init should instantiate a new slider and the update should update the slider's value, for example: ko.bindingHandlers.slide = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { var valueObservable = valueAccessor(); element.__slider__ = custom.d3.slider()

Categories : Knockout Js

What is the difference between bindingProvider.getBindings and bindingProvider.getBindingAccessors?
You will want to implement nodeHasBindings and getBindingAccessors functions if you are working against Knockout 3.0+. getBindings is still supported for backwards compatibility with KO 2+ code. With getBindingsAccessors you should return binding name / accessor pairs. An accessor is a function that returns the value of the binding.

Categories : Knockout Js

knockout radio group binding to an observableArray
If you are using the radio button as intended (one value selected at a time), then the checked value will need to be outside of the apps collection. If you are trying to use it like a checkbox array (0 - many selected at a time), then having the checked value inside the collection is appropriate. Here is a working example of a dynamically generated radio button array: http://jsfiddle.net/74ht766s

Categories : Knockout Js

Making an interactive device map using D3
I might go with a dendrogram here produced by D3's cluster layout. Any D3 visualization can have zoom behavior applied to it like this, so that's not really a consideration.

Categories : Knockout Js

Simple Knockout Viewmodel Issue
You set the value of an observable by invoking the observable function. So where you wrote: newSiteAccessViewModel.siteId = 'none yet'; you want newSiteAccessViewModel.siteId('none yet'); and similarly from within the click handler.

Categories : Knockout Js

Sort KnockoutJS observable array element dynamically
You could easily use a computed here to make sure when selected changes you re-sort - var alphabeticalOrderSort = function (l, r) { return (l.selected() == r.selected()) ? (l.selected() > r.selected() ? 1 : -1) : (l.selected() > r.selected() ? 1 : -1) }; computedTags: ko.computed(function () { return tags().sort(sortFunction); }) You will need to test out your own sort function to w

Categories : Knockout Js

Knockout using knockout-amd-helper plugin and pub-sub - publish happens before module that subscribe it has loaded
You could consider passing the extra information as initialization data to your "detail" module. If your module returns a function (constructor), then the value will be passed to the function itself. If your module returns an object, then it will be passed to the initialize function. So, instead of binding against just an observable module name, you can bind against an observable that holds a mo

Categories : Knockout Js

I don't know why I have to call valueHasMutated on this knockout observable array
The problem is that you've set up two observables to reference the same array. These separate observables have separate subscriptions, and updates on the one observable array don't propagate to the other even though the underlying array has changed. Instead of _mess = ko.observableArray(); _mess(logger.logMessages()); Write _mess = logger.logMessages;

Categories : Knockout Js

Knocout js computed observable not updated
I opened your fiddle and replaced all the code with this: $('#txtOriginal').change(function () { alert('Changed.'); }); And typed "1234" into your text box; and got the 'Changed.' alert. I then deleted all the text, and typed "1234" again, and did NOT get the alert. Based on this, I'm going to say that knockout is not getting your changed event, meaning the observable never even gets to s

Categories : Knockout Js

How to extend objects without having to resort to typing them as ?
I assume that you already have type information for the editables method - so you are just looking for how to extend your item with the editable extensions. Step one is to create an interface that describes the extensions, if one doesn't already exist. Here is a really basic one: interface KnockoutEditableExtensions { rollback(): void; } This is your re-usable "stuff that gets added" inter

Categories : Knockout Js

KnockoutJS table with input text as row to update value of another cell of the same row
You are not closing the data-bind. Please do. I am using div and Ul, you can replace with table. <div data-bind="foreach: Rates"> <ul> <li data-bind="text: $data.Rate"></li> <li data-bind="text: $data.Rate * $data.RateUnit()"></li> <li><input type="text" data-bind="value: $data.RateUnit" class=" form-control" /></li>

Categories : Knockout Js

unable to write into observable ? using write inside computed
You can recalculate Amount automatically function data() { var innerself = this; innerself.Amount = ko.observable(0); innerself.Volume = ko.observable(0); innerself.Rate = ko.observable(0); ko.computed(function() { innerself.Amount(innerself.Volume() * innerself.Rate()); }, innerself); } or use Amount as computed function data() { var innerself = this;

Categories : Knockout Js

Durandal: Making a module of custom Knockout bindings
I often just wrap my bindings in an empty module that returns nothing like so - define([], function () { // Convert any date to a MM-DD-YYYY format with moment.js ko.bindingHandlers.Date = { update: function (element, valueAccessor) { var value = valueAccessor(); var date = moment(value()); var strDate = date.format

Categories : Knockout Js

how to conditionally add a class based on text length
You can just bind to AuditorName directly as that will evaluate truthy if it's not an empty string: <label class="col-md-8 boldLabel" data-bind="text: AuditorName, css: {'border1pxsolid borderblack': AuditorName}"> </label> The reason it's not working as you have it is that AuditorName is an observable so you'd have to evaluate it to access its length property. So this wou

Categories : Knockout Js

sort items by a particular property in knockout.js
I've had a stab at something that should work without being able to see your specifics. Firstly, in the viewmodel, I've created two computed observables. The first loops through the objects (which I've assumed are in an observable array called obj). It returns a new array containing the objects that are not in a group. The second one builds up another array of key/value pairs, where the key is

Categories : Knockout Js

UI not updating when it should
Your checked property of locations variable needs to be observable, so knockout.js could detect when the property updated. Change your code to this: var locations = [ {'id': 1, 'name': 'PP', 'checked': ko.observable(false)}, {'id': 2, 'name': 'Ta keo', 'checked': ko.observable(false)}, {'id': 3, 'name': 'Kompong Som', 'checked': ko.observable(true)} ];

Categories : Knockout Js

Remote Kendo Auto Complete not working
Given that your data is in an element called DATA (uppercase), your schema.data function should be: data: function (response) { return response.data; } or simply: data: "DATA" You should also note that since you have set minLength to 3, until you type 3 characters it will not send the request to the server for bringing the data.

Categories : Knockout Js

Custom Mapping entire Array
You could try moving one level up and create a mapping function for the control property instead. var mapping = { 'control': { create: function (control) { debugger; } } }; And create add the computed functions to that.

Categories : Knockout Js

How to clear the selected values in Select2
Whe you create a custom binding you need to specify two different functions: init: this is called once, when the binding is done. You should use it to add event handlers, and set default attributes for the element, apply jQuery plugins... update: this is called after init, and whenever any used observable or computed observable changes. The observables can be accessed through the valueAccessor,

Categories : Knockout Js

unable to initialize iconpos for collapsible
You are using a quite old version (1.2) of jQuery mobile where the setting is called iconPos with an uppercase P: var e = $(element).find('li >div'); e.collapsible({iconPos: "right"}); Demo JSFiddle. However this setting name changed in version 1.3.0 with fixing #4899. So if you upgrade your jQuery mobile version then your original code will also work: Demo JSFiddle.

Categories : Knockout Js

Precompiling web components
You could use PhantomJS from node, like this answer suggests. var page = require('webpage').create(); page.open('http://localhost', function (status) { if (status !== 'success') { console.log('Unable to access network'); } else { var p = page.evaluate(function () { return document.getElementsByTagName('html')[0].innerHTML }); console.log(p);

Categories : Knockout Js

Knockout text bind to a json object
Can you make a JSFiddle showing the problem? I'm answering this question now because what I have to say is too much for a comment, but I can't really verify if it fixes anything if I can't reproduce the issue. You are correct that text: contractDetail. should be changed to text: contractDetail().. Do any errors show in your console when you do this? Another way would be to wrap both these lines

Categories : Knockout Js

KnockoutJS how to programmatically set value in dropdown
It's not bound to a collection of strings. It happens to display as a string because of this part of the binding: optionsText: "name". To set which value it's bound to you need to set it to the object itself. The objects themselves are in an array called sampleProductCategories which, rather confusingly, are actually included from a separate file in that fiddle: http://knockoutjs.com/examples/re

Categories : Knockout Js

Am I incorrectly building binding handlers?
You are replacing the update mechanism of the binding handler with computeds and subscriptions, so yes this is clearly not best practice when creating custom binding handlers, otherwise there would be no update function. Other than violating best practices, you are just creating more overhead with added subscriptions and computeds that aren't needed. The binding handler flow will be executed for

Categories : Knockout Js

Subscribing a knockout observable to a custom Jquery event with FuelUX tree
Don't be fooled by the "event" term, the event binding is mostly useful for binding to DOM events. Instead, you could use a custom binding handler to hook up a piece of the view to a UI plugin. For example: ko.bindingHandlers["fuelEX"] = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { $(element).on('selected.fu.tree', function (evt, data) { // Mod

Categories : Knockout Js

knockoutjs - How can I populate an empty observable array in response to user action (anchor link click)
The available products that can be selected are also a kind of data and therefore belong into the ViewModel, and not the View (HTML file). function mfProductViewModel() { // Data var self = this; self.selectedProducts = ko.observableArray([]); self.products = [ new mfProduct({ MfProductId: '00001', MfProductName: 'Milky Way' }), new mfProduct({ MfProductId: '00002

Categories : Knockout Js

Validate date in MM/YYYY format in momentjs
Moment accepts an array of formats the string is expected to be parsed with (String + Formats). Change your validator to use it. You'll also want to enable strict parsing so it must match one of the formats. ko.validation.rules["simpleDate"] = { validator: (val: any, validate: any) => { if (val == null) return true; return moment(val, ['MM/DD/YYYY', 'MM/YYYY'], true).isV

Categories : Knockout Js

Knockout binding not working for the input type="text"
That is because you are using the text binding inside the numericText binding you created. That binding doesn't work on input elements. You need to use the value binding instead for those. EDIT: I am not sure you can use the value binding in your binding like that. Here is an example of a working value-style binding: ko.bindingHandlers.ValueStyle = { init: function(element, valueAccessor) {

Categories : Knockout Js

How to generate the object list in observableArray
To make thinks a whole lot easier to just put your table header from within each json object and (which is what ive done) It's not impossible to do it the way you have, just a pain in the ass Heres my JS fiddle http://jsfiddle.net/sgg8uoy3/11/ And heres the HTML <table style="width:100%"> <tr data-bind="foreach: cols"> <th data-bind="text: header"></th> </tr>

Categories : Knockout Js

spa on VS2013 learning
As mentioned by Nathan Fisher, I would also like to recomend http://www.pluralsight.com/courses/single-page-apps-jumpstart it's really good.. But maybe a better consideration would be to learn MVC, then learn Knockout/Angularjs/Whatever then use them togeter! Also, don't learn MVC4, learn MVC5 (imo) MVC4 fundamentals OR MVC5 fundamentals Knokcoutjs OR Anuglarjs Another goodie I can recomend is

Categories : Knockout Js

Knockout click data-bind not firing
You need to make self a local variable instead of a global by declaring it with var: function Workers(){ var self = this; self.onClick = function() { alert('2'); }; } Without the var, self in that function is the same self as you have in the Worker function, so its value gets overwritten with the Worker version. See http://jsfiddle.net/cr7cy36m/1/

Categories : Knockout Js

how to install Knockout-jQueryUI?
One reason is you may not be you are getting the file from http instead of https. Just use this: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js The browser will use the page's protocol to try to obtain the file. On non-secure pages, http. On secure pages, https. Same for Knockout UI. So it will get the script from the correct protocol ...in both http and https contexts. You may

Categories : Knockout Js

Change input date format when using Knockout.js to mm/yyyy
I added a new binding handler called date2 to the DateHandler file <li> <label class="required_label">Date of Event</label> <input style="width: 140px;" type="text" data-bind="date2: eventDate" /> </li> <li> <label class="required_label">Date of Lawsuit</label> <input style="width: 140px;" type="text" data-bind="date2: lawsuitDate

Categories : Knockout Js

Update observable bound to input value only on enter key press
There's probably a way to do this with custom bindings, but here's a straightforward way to do it using the event binding. You seem to imply that the observable should only change iif the enter key is pressed. However, I've added the blur event as a trigger too; it's easy to remove that anyhow. var ViewModel = function() { var self = this; self.zoomLevel = ko.observable('100'); self.ne

Categories : Knockout Js

Cannot Init Late Binding Knockout
module1 is an observable so you have to set it appropriately, you were overriding it. function mainViewModel() { var self = this; self.moduleIn = createSubViewModel(moduleViewModel); self.module1 = ko.observable(); // this module will loaded after menu click self.loadModule1 = function() { // create only first attempt if (typeof se

Categories : Knockout Js

KnockoutJS - Set the initial value of a select list based on the output of computed observables
Define the selected priceBand as an observable: self.selectedPriceBand = ko.observable(); Change the initialPrice computed so that it updates this observable, like this: alert(price[0]); self.selectedPriceBand(price[0]); return price[0]; Remove the line that redefines the observable: self.selectedPriceBand = ko.observable(self.initialPrice()); When you do this, the existing observable is

Categories : Knockout Js




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.