In my application, I am utilizing Knockout and Typescript. One of the classes in my code is as follows:
class Address
{
State :string;
ZIP: string;
Street: string;
}
I want to create a component that will handle the updating of an object of this class.
Here's a snippet of my application:
var addressObservable = ko.observable(new Address() { State: "aaa", ZIP: "12211", Street: ""};
<address-component params="value: addressObservable"> </address-component>
The HTML and TypeScript VM for my component are as follows:
<div data-bind="with: address">
<input data-bind="value: State" />
<input data-bind="value: ZIP" />
<input data-bind="value: Street" />
</div>
class AddressComponent<Brand> {
public address: KnockoutObservable<Object>;
constructor(params: AddressParams) {
this.address = params.address;
}
}
In essence, a property in my application is passed to the component and bound to certain inputs within the component.
The main goal is for this component to assign a value to the "address" observable in one of two scenarios:
"Address" object (if some properties are filled)
null (if State, ZIP, and Street properties are empty).
I'm unable to convert the "address" object into ko.computed within the component. Similarly, I prefer not to modify it outside of the component. Does anyone have suggestions on how to achieve this?