Exploring the selection box model using TypeScript and Knockout

    

Seeking assistance in converting a Knockout.js code to Knockout with Typescript. The current Knockout.js code is operational, but I am encountering difficulties in integrating it with Typescript...

    

View:

    
<select data-bind="options: choices, value: selectedChoice"></select>
    

Model:

    
var MyModel = {
        choices: ["Blue", "White", "Black", "Yellow"],
        selectedChoice: ko.observable("Yellow") 
    };

    MyModel.selectedChoice.subscribe(function(newValue) {
       alert("the new value is " + newValue); 
    });

    ko.applyBindings(MyModel);
    

Typescript:

    
import BaseVM = require("./BaseVM");

     class MyModel extends BaseVM {
         choices = ko.observableArray(["one", "two", "three"]);

         //Here selectedChoice subscribe in typescript...

     }

     export = MyModel;

Answer №1

To implement a subscription in typescript within a class, it is necessary to include the subscription code inside a constructor function. This allows you to utilize "this" keyword to access the specific property you wish to subscribe to.

class MyModel extends BaseVM {
    choices = ko.observableArray(["one", "two", "three"]);
    selectedChoice = ko.observable("Yellow");

    constructor() {
        this.selectedChoice.subscribe(function (newValue) {
            alert("the new value is " + newValue);
        });
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Uniform Heights Across Devices with Responsive Design Strategies

I am struggling with a height consistency issue that I cannot figure out. The problem can be seen in this Fiddle: FIDDLE Here is the code snippet: $(document).ready(function() { if ($(window).width() > 768) { $(window).ready(function() { ...

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

What specific web technologies were implemented for the website http://www.badassembly.com/work/?

While exploring the Bad Assembly website, I came across something fascinating. As I scrolled through different sections, I noticed that the URL in the address bar and the browser's "Back" button were both changing without requiring a page refresh. I ...

Unable to see text scrolling in the div container

I am trying to manipulate a div that contains some phrases: <div class="container"> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <di ...

How to incorporate a popup modal in your project and where should you place the DialogService constructor

Currently, I am in the process of developing a CRUD ASP.NET Core application using Angular 2 and Typescript. Prior to incorporating a popup feature, this was my output: https://i.stack.imgur.com/vHvCC.png My current task involves placing the "Insert or e ...

Using Javascript regex to capture the image name from a CSS file

As I work with JavaScript regex, my goal is to extract the image name and extension as a capture group of CSS properties. Criteria Must start with "url" Followed by brackets Optional quotes inside brackets The location can include path information Must ...

Having trouble iterating through a JSON response in an Ember template

Here is the content of my JSON array: { "object": { "assignments": [ { "assignmentId": 14706368, "sectionId": 0, "assignmentTitle": "file attachment A", "assignmentSta ...

Click on each item within the v-for loop to gather relevant information, and subsequently iterate through the collected data

Within a v-for loop, I have implemented a button that, when clicked, retrieves specific data. The objective is to display this data below or in place of the clicked button. <div v-for="(item, index) in items" :key="index"> <button @click="fetch ...

Using ngx-bootstrap typeahead with custom itemTemplate for objects

I've created a custom ngx-bootstrap/typeahead component for my ngx-formly generated forms. This component fetches search results from an API and is designed to be reusable for various objects, making it dynamic. My goal is to have the typeahead retri ...

Trouble Logging In: Twitter's Authentication Failure Message

When attempting to update or post a status on Twitter using Ionic, I encounter an issue. The OAuth authentication works successfully for retrieving the UserProfile Api. However, when trying to post an image or status, an error is displayed ("Could not au ...

Reduce the size of a container element without using jquery

In my Angular application, I have structured the header as follows: -- Header -- -- Sub header -- -- Search Box -- -- Create and Search Button -- -- Scroll Div -- HTML: <h1> Header </h1> <h3> Sub header </h3> <div class="s ...

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

Issue: Invalid parameter: 'undefined is not a numeric value' for DecimalPipe

Here is the HTML input code that I am using: <input class="number " type= "text" pInputText [readonly]="" formControlName="id" [required]="" plmNumberFormatter [value]="data?.id | numberPipe" /> However, when I place the cursor on the input fiel ...

Validation of form inputs does not occur during typing, only when the input is blurred

Currently, I have implemented a combobox with input data validation using Vuelidate: <template> <v-combobox clearable v-model="surname" :items="commonSurnames" label="Surname" ...

Ways to compel a JSON-transmitted expression into the Angular scope

Seeking guidance on the best way to convert HTML from JSON into a trigger for a modal/toggle upon clicking. Within the JSON data consisting of 100 entries, there are about 10 links that need to activate a pop-up when clicked. These links are displayed as ...

Rendering to a texture using the pingpong method in Three.js went smoothly, with no issues detected and the output was not

I attempted to implement the pingpong texture swap technique to generate smoke in threejs by following a tutorial that was published some years ago. Unfortunately, this tutorial utilizes an outdated version of threejs, and I am experiencing difficulties tr ...

Making a HTTP GET call in NodeJS using the http.get() method to an external API

I'm encountering an issue with my NodeJS (using Express) HTTP GET request to an external API. Despite properly setting up my code, I'm not receiving any data in return. Here is the snippet: import * as http from "http"; const options = { h ...

"Dilemma: Why won't the AJAX form post load inside the

Apologies for the simple question, but I'm experiencing an issue where nothing happens when the button is pressed. Any assistance would be greatly appreciated. AJAX $(document).on("ready", function(){ //Form action $("#wbForm").on("submit", function( ...

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

Refreshing a jQuery variable with a new query

I am attempting to create a custom validator using jQuery, but I have encountered what appears to be a limitation in the framework. When I assign a jQuery value to a JSON variable and then use jQuery to add more DOM elements to the current page that match ...