compose bind data from Html to included html on search click single page application

Question

I have a small requirement that i want to refresh products data after search product click event.

SearchProduct(search.html) search Click --> GetProduct --> pass data to include html(products.html)

<------- search.html ------>
    <!--ko compose: {view: 'products.html'} -->
    <!--/ko-->

<--- search.js --->
define(function (require) {

      return
      {
          Products: ko.observableArray(),
          searchProducts: function (data) {
                  $.get('Api', searchInputs, function (data) {
                     Products = data;
                  }
          }
      };
});

<---- products.html ---------->

<div>
    <table data-bind='visible: Products().length > 0'>
        <thead>
            <tr>
                <th data-bind="text: orderIdText"></th>
                <th data-bind="text: customerNameText"></th>
                <th data-bind="text: carrierText"></th>
                <th data-bind="text: soldAtStoreText"></th>
                <th data-bind="text: linesText"></th>
                <th data-bind="text: dateSoldText"></th>
            </tr>
        </thead>
        <tbody data-bind='foreach: Orders'>
            <tr>
                <td><a href="#" data-bind="text: OrderInfo.OrderNumber"></a></td>
                <td data-bind="text: CustomerInfo.FirstName"></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>

    </table>
</div>

can one one help?

Thanks
shiva

Answer 1

<!--ko compose: {view: 'searchproducts.html', model:''} -->
<!--/ko-->

function ProductDetails()
{
  // Properties..
}

$.get('Product/Search', searchObj, function (data) {
    var mapped = $.map(data, function (item) {
            return new ProductDetails();
    }
}

finally i got the above solution.

Answer 2

The searchProducts function should map the data returned from the api and update the Products observable array:

searchProducts: function (data) {
    $.get('Api', searchInputs, function (data) {
        var products = ko.mapping.fromJS(data);
        this.Products(products);
    }
}

Answer 3

You object here Products is an observableArrays, So to change/set it's value you need to use ()

So suppose you are getting a JSON array from your api call you need to do:

searchProducts: function (data) {
    $.get('Api', searchInputs, function (data) {
        this.Products(products);
    }
}