7

Knockout を使用してコース リスト選択ツールを実装しています。以下のアプローチを使用してデータ (MVC3/Razor) を設定しているため、ビューモデルが最初に設定されたときに、各 KO 配列 (つまり、CourseList、ScheduleList) で問題が発生することはありません。ただし、サーバーからの初期ロードでゼロ行が返された場合、つまりビューモデルの '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 にデータが入力されない場合、次のコードはエラーをスローします。最初のページ読み込みにデータが含まれていた場合、.removeAll() や .push() などを呼び出すことができます。

var oneA= 'abc';

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

2 に答える 2

9

作成時にマッピングパラメータを設定して、特定の構造を与えます。その後、更新が行われます。

最も可能性が高いのは、DataFromServer実際にはScheduleListプロパティがまったく含まれていないことです。したがって、マップされると、対応するプロパティは作成されません。マッパーは、既存のプロパティのみをオブザーバブルにマップします。

createいずれかの配列が設定されていないときに空の配列を追加するには、ビューモデルのオプションを設定する必要があります。そうすれば、ビュー モデルは対応する観測可能な配列を配置することになります。

CourseListorが配列であることを確認すること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);
于 2012-10-20T01:54:17.483 に答える
1 
var data = {
    CourseList: DataFromServer.CourseList || ko.observableArray([]) ,
    ScheduleList: DataFromServer.ScheduleList  || ko.observableArray([])
    };
于 2012-10-19T23:25:40.040 に答える