javascript - 更新布局时将 knockout 对象复制到另一个对象

Question

当我的用户选择可观察数组中的一个对象时，我想将其复制到“selectedObject”。但是当我这样做时，“SelectedObject”上的布局绑定(bind)不会更新。

所以我创建了一个更新方法，但我发现它很难维护。有更好的办法吗？

这是我选择的对象用户界面:

<div class="row" data-bind="with: SelectedFlightObject">
    <div>select object:</div>
    <div data-bind="html: FlightNumber"></div>
</div>

这是我想要工作但没有工作的js:

//this do not update the layout:
this.OnFlightClick = function (selectObject) {   
        this.SelectedFlightObject = selectObject;
    }.bind(this);

这里是更新ui的js，但是发现很难维护。

UpdateFlightObject: function (currentObj, newObj) {
    currentObj.AirplaneType(newObj.AirplaneType());
    currentObj.ArrivingDate(moment(newObj.ArrivingDate()));
    currentObj.FlightNumber(newObj.FlightNumber());
    currentObj.Duration(newObj.Duration());
    currentObj.ArrivalCode(newObj.ArrivalCode());
    currentObj.DeparturCode(newObj.DeparturCode());
},


this.OnFlightClick = function (selectObject) {
    FlightFactory.UpdateFlightObject(this.SelectedFlightObject, selectObject);
}.bind(this);

Answer 1

Knockout 要求您使用他们的可观察包装器。这些包装器是神奇发生的地方，一旦绑定(bind)，它们就会报告值的变化并接收用户输入。您的代码应该如下所示。

创建:

this.SelectedFlightObject = ko.observable(someInitialValueOrNull);

检索:

this.SelectedFlightObject();

更新:

this.SelectedFlightObject(someNewValueOrNull);