【问题标题】:How to pass Knockout JS attr binding value to ajax post method as variable如何将 Knockout JS attr 绑定值作为变量传递给 ajax post 方法
【发布时间】:2013-01-23 10:59:04
【问题描述】:

我的页面中有 2 个淘汰视图模型。我想将我的第一个视图模型的值发送到一个 ajax 帖子,该帖子获取数据并根据我从第一个视图模型传递的值将其添加到我的第二个视图模型中。

我要做的是将订单 ID 作为变量传递给我的第二个 Ajax 帖子,以便我可以获得特定订单号的订单详细信息。

我数据绑定一个这样的标签:

<a data-bind="attr: { href: Url, title: Detail }, text: OrderNumber"></a>

这是第一个 ViewModel 的一部分:

      var OrderDS = function (data) {
      var self = this;
      self.OrderNumber = ko.observable(data.OrderNumber);
      self.Url = ko.observable("#");
      self.Detail = ko.observable("Product Details For This Order");
     }

我想将 Observable OrderNumber 作为变量传递给我的辅助 Ajax Post:

 $.ajax({
            url: "AccountsReceivible.aspx/GetOrderDetails",
            data: '{}', //How Do I ADD the Selected Value Here???
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {
                var MappedDetail =
              $.map(Result.d,
             function (item) {
                 return new OrderDetailDS(item);
             }
               );
                self.OrderDetail(MappedDetail);

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });

【问题讨论】:

    标签: knockout.js


    【解决方案1】:

    您不必将 JSON 写成字符串,只需提供一个真实的 JS 对象即可:

    data : { orderNumber : self.OrderNumber() }
    

    (假设self是视图模型)

    编辑:

    对于视图模型之间的关联,您必须自己关心。在你的情况下:

    var OrderDetailViewModel = function (OrderDetail) {
        var self = this;
        var orderViewModel = OrderViewmodel;
    

    现在在我的第一个代码 sn-p 中将 self 替换为 orderViewModel

    【讨论】:

    • 如何从我的第二个 Viewmodel 访问 self.OrderNumber()?会是 ViewModel.OrderNumber() 吗? ajax 调用在我的辅助视图模型中。如果你想看看,这是我的代码:jsfiddle.net/Fumunchu/SNWsL
    猜你喜欢
    • 2017-08-07
    • 2011-06-15
    • 2012-10-17
    • 1970-01-01
    • 2012-06-05
    • 1970-01-01
    • 2012-12-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多