Setting value of Observable not updating in Knockout

by

Setting value of Knockout Observable / Observable Array doesn’t update

You need to use the setter function to update the value of your observable / observableArray –

Ex. 1 (observable) –

var name="John";
var myValue = ko.observable();
myValue(name); // Set myValue equal to John, update any subscribers

var newObservable = ko.observable('Bill');
myValue(newObservable()); // Set myValue equal to the value of newObservable, which is Bill

Ex. 2 (observableArray) –

var names = ['John', 'William', 'Dave'];
var myArray = ko.observableArray();
myArray(names); // Set myArray equal to the array of names John, update any subscribers

var newArray = ko.observableArray(['Sanford']);
myArray(newArray()); // Makes a clone of the array

Note See this Question to understand why this probably not what you are trying to do – What is the best way of cloning/copying an observablearray in knockoutJS?

Adding an item to an Observable Array

You need to push the item into the observableArray, not the underlying value of the observableArray –

var name="John";
var myValue = ko.observable(name);
var myArray = ko.observableArray();
myValue.push(myValue()); // Add myValue to my observableArray**

Creating a model to use/share in your view model

You can create a re-usable model to use in your view models. This is similar to using a class in C# to create objects that have common properties.

function objectModel(item) {
    var self = this;
    self.Name = ko.observable(item.name);
    self.Description = ko.observable(item.description);
}

Which can be created like – 

var object = {
    name: 'John',
    description: 'a person'
}

var john = new objectModel(object);

Which could also be done by parameters instead of just objects – 

function objectModel(name, description) {
    var self = this;
    self.Name = ko.observable(name);
    self.Description = ko.observable(description);
}

var john = new objectModel('John', 'a person');

More Related Contents:

  1. Add directives from directive in AngularJS
  2. Difference between knockout View Models declared as object literals vs functions
  3. Resolve circular references from JSON object
  4. How to create an auto-complete combobox?
  5. AngularJS browser autofill workaround by using a directive
  6. Knockout.js incredibly slow under semi-large datasets
  7. Change observable but don’t notify subscribers in knockout.js
  8. knockout data-bind on dynamically generated elements
  9. Is there a proper way of resetting a component’s initial data in vuejs?
  10. How to clear/remove observable bindings in Knockout.js?
  11. make an input only-numeric type on knockout
  12. How can I bind the html content in vuejs?
  13. Knockout + Bootstrap 3 Radio Buttons
  14. When to use ko.utils.unwrapObservable?
  15. Binding true / false to radio buttons in Knockout JS
  16. Setting application wide HTTP headers in AngularJS
  17. combine dynamic and static classes through css binding, knockout.js
  18. Knockout JS – How to correctly bind an observableArray
  19. Javascript Equivalent to C# LINQ Select
  20. knockout.js using $index with if binding
  21. Knockout JS mapping plugin without initial data / empty form
  22. How do I find all possible permutations for a specific number?
  23. Local file access with JavaScript
  24. JavaScript plus sign in front of function expression
  25. nodejs vs node on ubuntu 12.04
  26. How do you log all events fired by an element in jQuery?
  27. How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
  28. Disable scrolling when touch moving certain element
  29. Why does google.load cause my page to go blank?
  30. using await on global scope without async keyword

Leave a Comment