Làm cách nào để truyền dữ liệu (mục đã chọn) đến Durandal bao gồm chế độ xem chi tiết?

Question

Tôi đã bắt đầu sử dụng (kể từ vài giờ trước) Durandal với hy vọng quản lý chế độ xem và cho phép bố cục trong một trang - cách tiếp cận trước, cũng sử dụng Knockout, quá khó sử dụng để duy trì tệp HTML chất béo .

Tôi đã cài đặt/cài đặt Durandal và tôi có thể tạo ra những quan điểm và viewmodels - tuy nhiên, tôi không biết làm thế nào để có được dữ liệu vào viewmodel để sử dụng như một cơ sở cho viewmodel mới. Ví dụ: tôi có "thanh điều hướng bên trái" để chọn mục - khi một mục được chọn, nó sẽ cập nhật "mục đã chọn" có thể quan sát được trong mô hình hiện tại, nhưng cũng cần cũng tải "chế độ xem chi tiết" chính xác ở bên phải: vì một phần lý do để thử Durandal tách riêng các thành phần/lượt xem, điều này sẽ đến từ một chế độ xem/chế độ xem riêng.

Tôi đã đọc qua tài liệu bao gồm Composition và Using Composition, nhưng phương pháp là cách chuyển dữ liệu cho chế độ xem không rõ ràng đối với tôi. Có vẻ như tôi có thể sử dụng khung nhìn với mô hình hiện có (trong khung nhìn/phạm vi hiện tại), nhưng tôi thực sự muốn chỉ sử dụng một số dữ liệu mô hình hiện tại (ví dụ: id) để lấy dữ liệu mô hình "thực" trong chế độ xem.

Vì vậy, câu hỏi của tôi;

• Làm cách nào để chuyển dữ liệu ban đầu, chẳng hạn như "mục đã chọn" sang mô hình chế độ xem được xử lý? Tôi muốn sử dụng ràng buộc "compose:" khai báo, vì đó là điều khiến KO .. KO.

• Đây có phải là khái niệm về việc có/chuyển dữ liệu ban đầu theo đúng cách hay không, hoặc có phương án nào tốt hơn không? Tôi đã nhìn thấy "activeItem" mơ hồ được đề cập, nhưng các chi tiết/useage cho tôi biết.

---

Cập nhật 1: Tôi đã tìm thấy How do we share the data between views/Pass the data view to view, nhưng những câu trả lời thiếu trong việc thực hiện thực tế. Tôi thực sự muốn không chia sẻ viewmodel giữa cha mẹ và con (cặp xem/khung nhìn riêng biệt) và tôi muốn sử dụng một cách tiếp cận khai báo (không có sự kiện). Phụ huynh không cần biết về đứa trẻ, nhưng đứa trẻ cần được cho ăn dữ liệu từ phụ huynh.

---

Cập nhật 2: Trong khi ở trên tôi gợi ý chỉ "id" đã được yêu cầu, tôi muốn một phương pháp làm việc với bất kỳ đối tượng cơ sở, mà các bộ định tuyến không nhất thiết phải phù hợp với. Liên kết sâu không phải là mối quan tâm trong trường hợp này. Tuy nhiên, nếu bạn cảm thấy bộ định tuyến là cách cách này để tiếp cận điều này, hãy đăng một đối số cho (chẳng hạn như chi tiết) làm câu trả lời và ít nhất tôi sẽ trả lời cho nó ..

Answer 1

Nếu bạn xem mã nguồn dễ dàng, bạn có thể xem ví dụ về cách tiếp cận chi tiết chính.

Họ đang sử dụng trình kích hoạt để soạn chế độ xem con.

https://github.com/IdeaBlade/Breeze/blob/master/Samples/TempHire/TempHire/App/viewmodels/resourcemgt.js

Tôi không biết nếu bạn đang sử dụng dễ dàng hay không, nhưng phương pháp này không phụ thuộc vào làm thế nào để bạn nhận được dữ liệu.

Answer 2

Có một bản ghi tuyệt vời về cách thực hiện việc này với mẫu SPA của John Papa cho Visual Studio bởi Eric Panorel tại đây: http://ericpanorel.net/blog/hot-towel-spa-master-detail-scenario.

Nói tóm lại, bạn có thể tận dụng lợi thế của định tuyến trong Durandal, và nó sẽ đi một cái gì đó như thế này:

master.js sẽ phơi bày một bộ các hạng mục:

define(function() { 
    var self = this; 

    this.items = ko.observableArray([]); 

    var activate = function() { 
    // ... get your items 
    self.items([ { id: 0, name: 'Item 1' }, { id: 1, name: 'Item 2' }]); 
    } 

    return { 
    // some properties and ... 
    activate: activate 
    } 
}); 

master.html sẽ ràng buộc họ và liên kết đến xem chi tiết:

<section data-bind="foreach: items"> 
    <a data-bind="text: name, attr: { href: '#/item/' + id() }"></a> 
</section> 

Bây giờ, mọi thứ vẫn sử dụng tham số dữ liệu tuyến đường để kéo ID ra trong chế độ xem chi tiết, detail.js:

define(function() { 
    var self = this; 

    this.name = ko.observable(); 

    var activate = function(routeData) { 
    var itemId = routeData.id; 

    // ... get your item details 
    // var details = ... 

    self.name(details.name); 
    } 

    return { 
    // some properties and ... 
    activate: activate 
    } 
}); 

Cuối cùng, bạn sẽ cần phải xác định các tuyến đường trong main.js của bạn:

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router'], 
function(app, viewLocator, system, router) { 

    //>>excludeStart("build", true); 
    system.debug(true); 
    //>>excludeEnd("build"); 

    app.title = 'Durandal app'; 
    app.start().then(function() { 
     toastr.options.positionClass = 'toast-bottom-right'; 
     toastr.options.backgroundpositionClass = 'toast-bottom-right'; 

     //Replace 'viewmodels' in the moduleId with 'views' to locate the view. 
     //Look for partial views in a 'views' folder in the root. 
     viewLocator.useConvention(); 

     //configure routing 
     router.useConvention(); 
     router.mapRoute('item/:id', 'viewmodels/item', 'Item', false); 

     app.adaptToDevice(); 

     //Show the app by setting the root view model for our application with a transition. 
     app.setRoot('viewmodels/shell', 'entrance'); 
    }); 
}); 

Và có bạn đi!

Answer 3

Tôi nghĩ rằng có thể chuyển bất kỳ đối tượng cơ bản nào như chúng ta thực hiện với cuộc gọi phương thức. ko.compose là thụ động; với bộ định tuyến durandal, bạn có thể mang dữ liệu đến nơi bạn muốn. Có một cái nhìn để work-around in this answer của tôi và giúp đỡ để thực hiện.