javascript - JSON 文件问题中的 knockout 绑定(bind)

Question

我正在使用 Typescript 定义我的 Knockout ViewModel。

我有一个JSON文件，可以看到其结构here (Github要点，因为粘贴在这里有点大)。

结构基本上是:

OrderLine(根)-> 里程碑 -> 工厂日期

或者口头上:(许多)订单行有(许多)里程碑，每个里程碑都有(一个)工厂日期。

我正在尝试使用以下内容构建 ViewMOdel:

var FactoryAppViewModel = (function () {
function FactoryAppViewModel(seasonID) {
    var self = this;
    self.seasonID = seasonID;
    self.orderlines = ko.observableArray([]);
    this.buildViewModel();
}

FactoryAppViewModel.prototype.buildViewModel = function () {
    var self = this;
    var getOrderLines = HTTP.get("/season/" + self.seasonID + "/orderlines").done(function (data) {
        self.orderlines(JSON.parse(data));
    }).fail(function () {
        error("Could not get orderlines");
    });
};

据我所知，此处数据上的 JSON.parse 会将值应用于订单行 ko.observableArray([])，但是我需要将 ko.observable 应用于订单行子项(里程碑)以及里程碑子项(factory_date)。我不知道该怎么做。至少来自 JSON。

我已阅读this但这似乎对我没有帮助。

我知道可观察的内容没有被应用，因为当我更改 View 中的factory_date时，它不会更新 View 模型。

如有任何帮助，我们将不胜感激。上面的 javascript 是编译后的 TypeScript。

编辑:

以下是我在 View 中访问代码的方式的示例:

<tbody data-bind="foreach: orderlines">
        <tr>
            <td data-bind="text: factory.name"></td>
            <!-- ko foreach: milestones -->
                <!-- ko if: factory_date == null -->
                    <td>
                        <span>TBA</span>
                    </td>
                <!-- /ko -->
                <!-- ko if: factory_date !== null -->
                    <td>
                        <div class="wrapper-wrapper">
                            <div class="btn btn-primary dateChanger">
                                <span data-bind="text: moment(factory_date.milestone_date).format('DD-MM-YYYY')"></span>
                            </div>
                            <div class="date-update-wrapper text-center">
                                <input type="text" data-bind="attr: {value: moment(factory_date.milestone_date).format('DD-MM-YYYY')}" class="form-control datetimepicker">
                                <a class="save-date btn btn-success" data-bind="click: function(){$root.saveDate(factory_date, $parent)}"><i class="fa fa-check"></i></a>
                                <a class="cancel-date btn btn-danger"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                    </td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    </tbody>

让我意识到我遇到问题的部分是这部分:

data-bind="click: function(){$root.saveDate(factory_date, $parent)}"

我创建了一个简单的 saveDate 方法，即 console.log(factory_date.milestone_date)，它返回默认的 JSON 数据，尽管我在 View 中对其进行了编辑(使用日期选择器)。

Answer 1

默认情况下，Knockout 不会将列表中的子项映射到可观察值。有一个插件叫ko.mapping这可以帮助您实现您想要的目标。

您可以设置“子项”映射，或循环遍历您的子项，手动使它们可观察(在本例中是通过 JavaScript):

var mappedChildren = [];
var children = someObj.children();
for (var i = 0; i < children.length; i++) {
  var mappedChild = ko.mapping.fromJS(children[i], mappingFunction);
  mappedChildren.push(mappedChild);
}
someObj.children(mappedChildren);