最初のビューモデルロードが空のときにノックアウトビューモデルを初期化する方法

Question

ノーカットを使用してコースリスト選択ツールを実装しています。私はviewmodelが最初に設定されたときに、各KO配列（CourseList、ScheduleList）を扱う際に問題がないように、データ（MVC3/Razor）を設定するために以下のアプローチを使用しています。しかし、サーバーからの初期ロードでゼロ行が返されると、viewmodel 'ScheduleList'プロパティが空であることを意味します。したがって、.push（）や.removeAll（）などのメソッドは呼び出すことができません。おそらく、これは、観測可能な配列はそれを埋めるものがないため作成されなかったことを意味します。モデルが塗りつぶされると、ScheduleListプロパティにListが設定されます。 MVCアクションがそれを空として返すときにインスタンス化する最善の方法は何ですか？それに対処していると思われるjsFiddleがありますが、「作成」オプションを使用しようとすると、モデル全体が空白になります。私は構文が '作成'オプションのものであるかどうかはわかりません。 jsFiddleはここにある：http://jsfiddle.net/rniemeyer/WQGVC/

// Get the data from the server 
var DataFromServer = @Html.Raw(Json.Encode(Model));  

// Data property in viewmodel 
var data = { 
    "CourseList": DataFromServer.CourseList , 
    "ScheduleList": DataFromServer.ScheduleList 
    }; 

$(function() { 
    // Populate Data property 
    viewModel.Data = ko.mapping.fromJS(data); 

    // ko.applyBindings(viewModel, mappingOptions);    
    ko.applyBindings(viewModel); 
}); 

初期ページのロードがScheduleListを移入しない場合は、次のコードは、エラーがスローされます。最初のページのロードがデータを含んでいる場合、あなたは作成時にそうなるように、あなたのマッピングパラメータを設定

var oneA= 'abc'; 

// push not working     
this.Data.ScheduleList.push(oneA); 

Answer 1

.removeAll（）と.push（）などを呼び出すことができ、あなたはそれを特定のを与えます構造。その後、あなたのための更新を行います。

あなたのDataFromServerには実際にはScheduleListプロパティが含まれていない可能性があります。したがって、マップされている場合、対応するプロパティは決して作成されません。マッパーは、既存のプロパティをobservablesにマップするだけです。

いずれかの配列が設定されていない場合は、空の配列を追加するためにビューモデルのオプションをcreateに設定する必要があります。そうすれば、ビューモデルは対応する観測可能な配列で終わるでしょう。

CourseListまたはScheduleListが配列であることを保証することによって、マップされたビューモデルではobservableArrayというオブジェクトにマップされ、コードは期待通りに機能します。

var DataFromServer = { 
    'CourseList': [1,2,3] 
    //, 'ScheduleList': [] 
}; 

var dataMappingOptions = { 
    'create': function (options) { 
     var data = options.data; 
     data.CourseList = data.CourseList || []; 
     data.ScheduleList = data.ScheduleList || []; 
     return ko.mapping.fromJS(data); 
    } 
}; 

viewModel.Data = ko.mapping.fromJS(DataFromServer, dataMappingOptions); 

Answer 2

var data = { 
    CourseList: DataFromServer.CourseList || ko.observableArray([]) , 
    ScheduleList: DataFromServer.ScheduleList || ko.observableArray([]) 
    };