Cách khởi tạo chế độ xem Knockout khi tải viewmodel ban đầu trống rỗng

Question

Tôi đang sử dụng Knockout để triển khai công cụ chọn danh sách khóa học. Tôi đang sử dụng cách tiếp cận dưới đây để điền dữ liệu (MVC3/Razor), để khi viewmodel ban đầu được điền, tôi không có vấn đề gì với mỗi mảng KO (ví dụ: CourseList, ScheduleList). Tuy nhiên, khi tải ban đầu từ máy chủ trả về 0 hàng, nghĩa là thuộc tính viewmodel 'ScheduleList' trống, thì không thể gọi bất kỳ phương thức nào như .push() hoặc .removeAll(). Có lẽ điều này có nghĩa là mảng quan sát không bao giờ được tạo ra vì không có gì để lấp đầy nó. Khi mô hình được lấp đầy, thuộc tính ScheduleList được điền với một Danh sách. Cách tốt nhất để khởi tạo nó khi hành động MVC trả về nó là sản phẩm nào? Có một jsFiddle dường như giải quyết nó, nhưng khi tôi cố gắng sử dụng tùy chọn 'create', nó làm cho toàn bộ mô hình của tôi trống. Tôi không chắc cú pháp của tùy chọn 'create' là gì. Các jsFiddle là ở đây: 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); 
}); 

Khi tải trang ban đầu không cư ScheduleList, sau đó đoạn mã sau ném một lỗi. Nếu tải trang đầu tiên chứa dữ liệu, sau đó bạn có thể gọi .removeAll() và .push() vv

var oneA= 'abc'; 

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

Answer 1

Thiết lập các thông số bản đồ của bạn để làm cho nó vân vân sáng tạo, bạn cung cấp cho nó một số kết cấu. Sau đó, nó sẽ làm các bản cập nhật cho bạn.

Điều có thể xảy ra nhất là số DataFromServer của bạn thực sự không chứa thuộc tính ScheduleList. Vì vậy, khi nó được ánh xạ, một tài sản tương ứng không bao giờ được thực hiện. Trình ánh xạ sẽ chỉ ánh xạ các thuộc tính hiện có tới các quan sát.

Bạn cần đặt trong các tùy chọn create cho mô hình chế độ xem để thêm các mảng trống khi mảng không được đặt. Bằng cách đó, mô hình khung nhìn của bạn sẽ kết thúc với các mảng quan sát tương ứng tại chỗ.

Bằng cách đảm bảo rằng CourseList hoặc ScheduleList là một mảng, mô hình chế độ xem ánh xạ sẽ ánh xạ chúng thành các đối tượng observableArray để mã của bạn hoạt động như bạn mong đợi.

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([]) 
    };