compose bind data from Html to included html on search click single page application
-
21-12-2019 - |
Pregunta
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> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
can one one help?
Thanks
shiva
Solución 3
<!--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.
Otros consejos
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);
}
}
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);
}
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow