Wie kommt man Daten von Masteransicht Detailansicht

Question

Ich habe eine image to illustrate meine Frage
Ich verwende devextreme, html, js (Knockout), C#, OData Dies ist mein Code:

auftrags- details.dxview

<div data-options="dxView : { name: 'OrderDetail', title: 'Order' } " > 
<div data-bind="dxCommand: { onExecute: '#OrderEdit/{id}', direction: 'none', id: 'edit', title: 'Edit', icon: 'edit' }"></div> 
<div data-bind="dxCommand: { onExecute: handleDelete, id: 'delete', title: 'Delete', icon: 'remove' }"></div> 
<div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-detail-view dx-content-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: 'dx-fieldset-header,.dx-field', animation: 'detail-item-rendered', renderWhen: isReady }" > 
    <div data-bind="dxScrollView: { }"> 
     <div class="dx-fieldset"> 
      <div class="dx-fieldset-header" data-bind="text: order.PhoneNumber"></div> 
      <div class="dx-field"> 
       <div class="dx-field-label">Order id</div> 
       <div class="dx-field-value-static" data-bind="text: order.OrderId"></div> 
      </div> 
      <div class="dx-field"> 
       <div class="dx-field-label">Phone number</div> 
       <div class="dx-field-value-static" data-bind="text: order.PhoneNumber"></div> 
      </div> 
      <div class="dx-field"> 
       <div class="button-info" data-bind="dxButton: { text: 'Add Item', onClick: '#AddItem/{order.OrderId}', icon: 'add', type: 'success' }"></div> 
       <!-- Item List --> 
       <div data-bind="dxList: { dataSource: dataSource, pullRefreshEnabled: true }"> 
        <div data-bind="dxAction: '#OrderDetailDetails/{OrderDetailId}'" data-options="dxTemplate : { name: 'item' } "> 
         <!--<div class="list-item" data-bind="text: Item().ItemName"></div> 
         <div class="list-item" style="float:right;" data-bind="text: Amount"></div>--> 
         <div class="item-name" data-bind="text: Item().ItemName"></div> 
         <div class="item-amount" data-bind="text: Amount"></div> 
         <div class="clear-both"></div> 
        </div> 
       </div> 
      </div> 
      <div class="dx-field"> 
       <div class="dx-field-label">Grand total</div> 
       <div class="dx-field-value-static" data-bind="text: order.GrandTotal"></div> 
      </div> 
     </div> 
     <div data-options="dxContentPlaceholder : { name: 'view-footer', animation: 'none' } " ></div> 
    </div> 
</div> 

auftrag details.js

POSApp.OrderDetail = function(params, viewInfo) { 
    "use strict"; 

    var id = params.id, 
     order = new POSApp.OrderViewModel(), 
     isReady = $.Deferred(), 
     // Item List 
     shouldReload = false, 
     dataSourceObservable = ko.observable(), 
     dataSource; 

    function handleDelete() { 
     DevExpress.ui.dialog.confirm("Are you sure you want to delete this item?", "Delete item").then(function(result) { 
      if(result) 
       handleConfirmDelete(); 
     }); 
    } 

    function handleConfirmDelete() {   
     POSApp.db.Orders.remove(id).done(function() { 
      if(viewInfo.canBack) { 
       POSApp.app.navigate("Orders", { target: "back" }); 
      } 
      else { 
       POSApp.app.navigate("Blank", { target: "current" }); 
      } 
     }); 
    } 

    function handleViewShown() { 
     POSApp.db.Orders.byKey(id).done(function(data) { 
      order.fromJS(data); 
      isReady.resolve(); 
     }); 

     //Item List 
     if (!dataSourceObservable()) { 
      dataSourceObservable(dataSource); 
      dataSource.load().always(function() { 
       isReady.resolve(); 
      }); 
     } 
     else if (shouldReload) { 
      refreshList(); 
     } 
    } 

    //Item List 

    function handleOrderDetailsModification() { 
     shouldReload = true; 
    } 

    function handleViewDisposing() { 
     POSApp.db.OrderDetails.off("modified", handleOrderDetailsModification); 
    } 

    function refreshList() { 
     shouldReload = false; 
     dataSource.pageIndex(0); 
     dataSource.load(); 
    } 

    dataSource = new DevExpress.data.DataSource({ 
     store: POSApp.db.OrderDetails, 
     map: function (item) { 
      return new POSApp.OrderDetailViewModel(item); 
     }, 
     expand: ["Item"], 
     sort: { field: "OrderDetailId", desc: false }, 
     filter: ["OrderId", parseInt(id)] 
    }); 

    POSApp.db.OrderDetails.on("modified", handleOrderDetailsModification); 

    //Item List 

    return { 
     id: id, 
     order: order, 
     handleDelete: handleDelete,   
     viewShown: handleViewShown, 
     isReady: isReady.promise(), 
     //Item List 
     dataSource: dataSourceObservable, 
     refreshList: refreshList, 
     viewDisposing: handleViewDisposing, 
    }; 
}; 

Add-item.dxview

<div data-options="dxView : { name: 'AddItem', title: 'Add Item' } " > 
    <div data-bind="dxCommand: { onExecute: handleSave, id: 'save', title: 'Save', icon: 'save' } "></div> 
    <div data-bind="dxCommand: { onExecute: handleCancel, id: 'cancel', behavior: 'back', title: 'Cancel', icon: 'close' }"></div> 
    <div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-edit-view dx-content-background dx-form-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: '.dx-field', animation: 'edit-item-rendered', renderWhen: isReady }"> 
     <div data-bind="dxScrollView: { }"> 
      <div class="dx-fieldset"> 
       <div class="dx-field"> 
        <div class="dx-field-label">Order detail id: </div> 
        <div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.OrderDetailId, readOnly: true }"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Order Id: </div> 
        <div class="dx-field-value" data-bind="dxLookup: { dataSource: ordersSource, value: orderdetail.Order, displayExpr: 'PhoneNumber', title: 'Orders', placeholder: 'Choose Order' }"></div> 
        <!--<div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Order, placeholder: 'Enter Order Id' }"></div>--> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Item: </div> 
        <div class="dx-field-value" data-bind="dxLookup: { dataSource: itemsSource, value: orderdetail.Item, displayExpr: 'ItemName', title: 'Items', placeholder: 'Choose Item' }"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Quantity: </div> 
        <div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Quantity, placeholder: 'Enter Quantity' }"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Price: </div> 
        <div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Price, placeholder: 'Enter Price' }"></div> 
       </div> 
       <div class="dx-field"> 
        <div class="dx-field-label">Amount: </div> 
        <div class="dx-field-value" data-bind="dxNumberBox: { value: orderdetail.Amount, placeholder: 'Enter Amount' }"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Add-item.js

POSApp.AddItem = function (params, viewInfo) { 
    "use strict"; 

    var id = params.id, 
     isNew = (id === undefined), 
     isSplitLayout = viewInfo.layoutController.name === "split", 
     orderdetail = new POSApp.OrderDetailViewModel(), 
     isReady = $.Deferred(); 

    orderdetail.Order(parseInt(id)); 
    //orderdetail.Order(new POSApp.OrderViewModel(id)); 
    alert(parseInt(id)); 

    function load() { 
     return POSApp.db.OrderDetails.byKey(id, { expand: ["Item"] }).done(function (data) { 
      orderdetail.fromJS(data); 
     }); 
    } 

    function insert() { 
     // Insert Code 
     POSApp.db.OrderDetails.insert(orderdetail.toJS()).done(function (values, newId) { 
      //POSApp.app.navigate({ view: "order-details", id: params.id }, { target: "back" }); 
      POSApp.app.back(); 
      orderdetail.clear(); 
     }); 
    } 

    function handleSave() { 
     insert() 
     //orderdetail.clear(); 
     //POSApp.app.back(); 
     // Go back to order-edit and the item that have been chosen will be displayed in the order-edit 
     // And so on for the next item 
    } 

    function handleCancel() { 
     orderdetail.clear(); 
     POSApp.app.back(); 
    } 

    function handleViewShown() { 
     isReady.resolve(); 
    } 

    return { 
     orderdetail: orderdetail, 
     ordersSource: { 
      store: POSApp.db.Orders, 
      map: function(data) { 
       return new POSApp.OrderViewModel(data); 
      } 
     }, 
     itemsSource: { 
      store: POSApp.db.Items, 
      map: function (data) { 
       return new POSApp.ItemViewModel(data); 
      } 
     }, 
     handleSave: handleSave, 
     handleCancel: handleCancel, 
     viewShown: handleViewShown, 
     isReady: isReady.promise() 
    }; 

}; 

Was ich frage ist, wie die ID des Auftrags an die weitergeben Artikelansicht richtig hinzufügen? denn mit diesem Code, wenn ich es speichere, ist die orderid in der Datenbank null, also wird kein Wert eingefügt. In der Ansicht "Add Item" (Artikel hinzufügen) war die ID oder der Wert in der Reihenfolge, in der die Suche durchgeführt wurde, jedoch nicht in die Datenbank eingefügt.

Vielen Dank & Mit freundlichen Grüßen Michael Reno

Answer 1

Um einen Parameter auf einen Blick übergeben Sie die app.navigate() Methode mit args verwenden können, benötigen Sie:

MyApp.app.navigate({ 
    view: "home", 
    id: YOUR_ID 
}); 

In diesem Fall wird die id Feld wird in der Ansicht 'Home' verfügbar:

MyApp.home = function (params) { 
    var id = params.id; 
}; 

Weitere Informationen zu einem Naviga zwischen Ansichten in diesem tutorial auch.

Ich hoffe, dass diese Information für Sie hilfreich sein wird.

P.S. Es gibt viele nützliche Tutorials über das DevExtreme SPA Framework here.

UPD

Ich habe ein einfaches Projekt here erstellt. Es zeigt, wie Parameter zwischen Ansichten in Aktion übergeben werden.