在搜索单击单页应用程序中将 Html 中的数据绑定到包含的 html答案

【问题标题】：compose bind data from Html to included html on search click single page application在搜索单击单页应用程序中将 Html 中的数据绑定到包含的 html
【发布时间】：2013-12-01 06:35:45
【问题描述】：

我有一个小要求，我想在搜索产品点击事件后刷新产品数据。

搜索产品(search.html) 搜索点击 --> GetProduct --> 传递数据以包含 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;
                  }
          }
      };
});

<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>

可以一个人帮忙吗？

谢谢
湿婆

【问题讨论】：

标签： knockout.js requirejs durandal single-page-application amd

【解决方案1】：

searchProducts 函数应该映射从 api 返回的数据并更新 Products 可观察数组：

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

【讨论】：

【解决方案2】：

您在这里反对Products 是observableArrays，因此要更改/设置它的值，您需要使用()

所以假设你从你的 api 调用中得到一个 JSON 数组，你需要这样做：

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

【讨论】：

【解决方案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();
    }
}

我终于得到了上面的解决方案。

【讨论】：