Question

我在我的应用程序中使用Knockout和Typescript。我有一些课：

class Address 
{
    State :string;
    ZIP: string;
    Street: string;
}

我想创建负责更新此类对象的组件。

我的应用程序的一部分：

var addressObservable = ko.observable(new Address() { State: "aaa", ZIP: "12211", Street: ""};

<address-component params="value: addressObservable"> </address-component>

我的组件（html和typescript vm）看起来像：

<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;
    }
}

所以，在快捷方式中，在我的应用程序中，我有一些属性，我发送给我的组件。组件内部的这个属性受限于某些输入。

主要假设是该组件将输入“地址”可观察值：

“地址”对象（如果填写了某些属性）
null（如果State，ZIP和Street属性为空）。

我无法将“地址”对象更改为组件内部的ko.computed。我不想在组件之外更改它。有人知道怎么做吗？

Answer 1

如果你使地址'属性可观察，你可以将地址实例包装在一个计算中，当所有道具被清除时返回null：

function Address() {
  this.line1 = ko.observable("line 1");
  this.line2 = ko.observable("line 2");
  this.line3 = ko.observable("line 3");
};

function App() {

  var address = new Address();
  
  this.displayAddress = ko.pureComputed(function() {
    if (address.line1() ||
        address.line2() ||
        address.line3()) {
      return address;    
    }
    
    return null;
  });
  
};

ko.applyBindings(new App());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="with: displayAddress">
  <p>Clear inputs to see address set to null</p>
  <input data-bind="value: line1">
  <input data-bind="value: line2">
  <input data-bind="value: line3">
</div>

从Knockout组件返回不同的值

1 个答案: