Knockout.js - 兩個數組

Question

之間如何相互參照的對象我有2種型號：

var ProductViewModel = function() { 
    var self = this; 
    self.ProductList = ko.observableArray([]); 
    self.ProductTypeList = ko.observableArray([]); 

    //...init 2 array and some misc methods 
} 

：

var ProductModel = function(productid, productname, producttypeid, productprice) { 
    var self = this; 
    self.ProductId = productid; 
    self.ProductName = productname; 
    self.ProductTypeId = producttypeid; 
    self.ProductPrice = productprice; 
} 

和

var ProductTypeModel= function(producttypeid, producttypename) { 
    var self = this; 
    self.ProductTypeId = producttypeid; 
    self.ProductTypeName = producttypename; 
} 

我在一個視圖模型中使用它們在html文件中：

... 
<table> 
    <thead> 
    <tr> 
    <th>Id</th> 
    <th>Type</th> 
    <th>Name</th> 
    <th>Price</th> 
    </tr> 
    </thead> 
    <tbody data-bind="template: { name: 'row', foreach: ProductList }"> 
    </tbody> 
</table> 
... 
<script id="row" type="html/template"> 
    <tr> 
    <td data-bind="html: ProductId"></td> 
    <td data-bind="html: ProductName"></td> 
    <td data-bind="html: ProductTypeId"></td> <!-- I stuck here!!! --> 
    <td data-bind="html: ProductPrice"></td> 
    </tr> 
</script> 
... 

我希望我的表顯示ProductTypeName而不是ProductTypeId，但我無法將ProductTypeId傳遞到任何函數中以獲取ProductTypeName。

Answer 1

var ProductViewModel = function() { 
    var self = this; 
    self.ProductList = ko.observableArray([]); 
    self.ProductTypeList = ko.observableArray([]); 

    //...init 2 array and some misc methods 

    self.getProductTypeName = function (productTypeId) { 
    var typeId = ko.unwrap(productTypeId), 
     found = ko.utils.arrayFirst(self.ProductTypeList(), function (productType) { 
      return ko.unwrap(productType.ProductTypeId) === typeId; 
     }); 

    return found ? ko.unwrap(found.ProductTypeName) : null; 
    }; 
}; 

和

<script id="row" type="html/template"> 
    <tr> 
    <td data-bind="html: ProductId"></td> 
    <td data-bind="html: ProductName"></td> 
    <td data-bind="html: $root.getProductTypeName(ProductTypeId)"></td> 
    <td data-bind="html: ProductPrice"></td> 
    </tr> 
</script> 

Answer 2

您有相互關聯的兩個獨立的集合。您可以創建一個模型，通過計算組合對象的可觀測值來管理該關聯。

function ProductListModel (products, productTypes) { 
    this.Products = ko.observableArray(
     ko.utils.arrayMap(products, function (product) { 
      return new ProductModel(
       product.productId, 
       product.productName, 
       product.productTypeId, 
       product.productPrice); 
     }) 
    ); 
    this.ProductTypes = ko.observableArray(
     ko.utils.arrayMap(productTypes, function (productType) { 
      return new ProductTypeModel(
       productType.productTypeId, 
       productType.productTypeName); 
     }) 
    ); 

    this.AssociatedProducts = ko.dependentObservable(function() { 
     var products = this.Products(), 
      productTypes = this.ProductTypes(); 
     return ko.utils.arrayMap(products, function (product) { 
      var productType = ko.utils.arrayFirst(productTypes, function (productType) { 
       return product.ProductTypeId === productType.ProductTypeId; 
      }); 
      return { 
       ProductId: product.ProductId, 
       ProductName: product.ProductName, 
       ProductType: productType.ProductTypeName, 
       ProductPrice: product.ProductPrice, 
      }; 
     }); 
    }, this); 
} 

function ViewModel(data) { 
    var p = new ProductListModel(data.products, data.productTypes); 
    this.Products = p.Products; 
    this.ProductTypes = p.ProductTypes; 
    this.AssociatedProducts = p.AssociatedProducts; 
} 

<tbody data-bind="template: { name: 'row', foreach: AssociatedProducts }"> 
</tbody> 
... 
<script id="row" type="html/template"> 
    <tr> 
     <td data-bind="html: ProductId"></td> 
     <td data-bind="html: ProductName"></td> 
     <td data-bind="html: ProductType"></td> 
     <td data-bind="html: ProductPrice"></td> 
    </tr> 
</script> 

Fiddle