JSONファイルのノックアウトバインディング

Question

私はTypescriptを使用してノックアウトViewModelを定義しています。

私はJSONファイルを持っています。その構造はhere（ここに貼り付けるのが少し大きいのでGithubの要点）で見ることができます。

構造は基本的に：

オーダーライン（ルート） - >マイルストーン - > factory_date

または経口的（多くの）順序ラインは、（多くの）マイルストーンを有するそれぞれ有する（1）工場日。

私は次のように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を適用する必要があり、注文ラインko.observableArray([])に値を適用します。オーダーラインのchildren（マイルストーン）、マイルストーンの子供（factory_date）にも参照できます。そして、私はこれを行う方法を知らない。 JSONのすべてのうち最低のもの。

私はthisを読みましたが、それは私を助けてくれないようでした。

私はビューでfactory_dateを変更するとビューモデルが更新されないため、オブザーバブルが適用されないことが分かります。

ご協力いただければ幸いです。上のjavascriptはコンパイルされたTypeScriptです。

編集：ここでは

は私がビュー内のコードにアクセスしています方法の例です：

<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)）を作成しました。ビュー（datepickerを使用）でビューを編集しても、デフォルトのJSONデータが返されました。

Answer 1

ノックアウトでは、デフォルトでリスト内の子を観測可能オブジェクトにマッピングしません。あなたが探しているものを達成するのに役立つ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);