使用knockoutjs单击绑定,如何将值从一个视图模型传递到另一个视图模型?

时间:2014-01-30 16:28:09

标签: jquery knockout.js

我一直在各处搜索,并没有看到这个特殊场景的解释。我很感激任何人都可以提供帮助!我正在使用knockoutjs和jQuery。我试图在foreach绑定中使用单击绑定将数据值传递给另一个viewmodel。我正在从click事件中检索数据对象,但我不明白如何读取该数据对象中的实际值,因此我可以将其传递给第二个viewmodel。

这是我在第一个视图模型中的html:

<div id="collapseOne" class="accordion-body collapse in" data-bind="foreach: { data: model.savingsAccounts, afterRender: changeOption }">
  <div class="accordion-inner" data-bind="css: getRow(), click: $parent.goToDetails">
      <span class="tableArrow">&nbsp;&nbsp;&nbsp;</span>
      <span class="tableColumnLeft">Savings<br><span data-bind="text: $data.accountNum" /></span>
      <span class="tableColumnCenter">$<span data-bind="text: $data.currentBalance" /></span><span class="tableColumnRight">></span>
  </div>
</div>

当goToDetails评估时,我需要将“$ data.accountNum”值“12345”传递给第二个视图模型。

这是我在goToDetails中的内容,它在我的返回模块中定义:

goToDetails: function (data, event) {
            var thisItem = koMapping.fromJSON(data.data);
            alert(thisItem.accountNum);
            details.currentAccountID = thisItem.accountNum;
            shell.navigate('details', 'next');
        },

以下是我对象中的数据:

+ this
+ arguments
- data
     accountNum     "12345"
     accountType    "Savings"
     currentBalance "10.22"
+ event

警告显示thisItem.accountNum值的“未定义”。如何获得accountNum的实际值?另外,你有没有更好的建议将值传递给第二个视图模型而不是在我导航之前设置它?遗憾的是,我无法使用查询字符串。此外,我们没有会议。

非常感谢你的时间!

按要求添加我们的整个viewmodel.js代码:

define(['knockout', 'knockout-mapping', 'jquery', 'viewmodels/shell', 'viewmodels/details'], function (ko, koMapping, $, shell, details) {

    var self = this;
    var savingsAccounts = ko.observableArray();

    self.activeOption = 'A';

    self.changeOption = function() {
        if (self.activeOption == 'A') {
            self.activeOption = 'B';
        } else {
            self.activeOption = 'A';
        }
    };

    self.getRow = function() {
        if (self.activeOption == 'A') {
            return 'balancesRowB';
        } else {
            return 'balancesRowA';
        }
    };

    function buildSavingsAccounts() {
        savingsAccounts([ 
        { accountNum: '12345', accountType: 'Savings', currentBalance: '10.22' }
    ]);

    }


    // module instance
    return {
        model: {
            savingsAccounts: savingsAccounts
        },
        activate: function (activationData) {
            buildSavingsAccounts();         
        },
        goToDetails: function (data, event) {
            var thisItem = koMapping.fromJSON(data.data);
            alert(thisItem.accountNum);
            details.currentAccountID = thisItem.accountNum;
            shell.navigate('details', 'next');
        }
    };
});

1 个答案:

答案 0 :(得分:0)

你有两个viewModels绑定的元素你可以使用:

ko.contextFor(element);

这将使您可以访问其他元素的视图模型。在这种情况下,'element'是实际元素而不是jQuery选择器。