KnockoutJS 将 viewModel 传递给函数答案

【问题标题】：KnockoutJS passing viewModel to functionKnockoutJS 将 viewModel 传递给函数
【发布时间】：2012-07-13 12:37:33
【问题描述】：

我最终会在同一页面上使用多个 viewModel，因此我试图弄清楚如何将 viewModel 作为变量传递给函数以执行我的 ajax 调用。我正在尝试更新这个跨度：

<span data-bind="text: AnswerText"/></span> <span data-bind="text: GetFormattedDate() "/></span>

这段代码可以正常工作并正确填充 GetFormattedDate 中的值：

var viewModel1;
$(document).ready(function () {
    var jsonDataToSend = { questionConfigurationID: 1 };
    $.ajax({
        url: "SomePage.aspx/GetAnswerAndComments",
        type: "post",
        dataType: "text json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(jsonDataToSend),
        success: function (msg) {
            var result = msg.d;
            if (result != null) {
               viewModel1 = ko.mapping.toJS(result);
                ko.applyBindings(viewModel1, document.getElementById("divAnswerAndComment1"));
            }
        }
    });

});


function GetFormattedDate()
{
    var date = "";
    if (viewModel1.InsertDate != null) 
    {
        date = new Date(parseInt(viewModel1.InsertDate.substr(6)))
    } 
    return date;
}

但是，当我将 $document.ready 函数替换为调用 GetFormattedDate 时将 viewModel 作为变量传递的另一个函数时， viewModel1 未定义（见下文）。我很确定这与 viewModel1 的范围有关，但我无法弄清楚到底是什么问题。

var viewModel1;
$(document).ready(function () {
GetAnswersAndComments(1, viewModel1);
});


function GetAnswersAndComments(questionID, currentViewModel) {
    var jsonDataToSend = { questionConfigurationID: questionID };
    $.ajax({
        url: "ControlWebMethods.aspx/GetAnswerAndComments",
        type: "post",
        dataType: "text json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(jsonDataToSend),
        success: function (msg) {
            var result = msg.d;
            if (result != null) {
                currentViewModel = ko.mapping.toJS(result);
                ko.applyBindings(currentViewModel);
            }
        }
    });        
}

function GetFormattedDate()
{
    var date = "";
    if (viewModel1.InsertDate != null) 
    {
        date = new Date(parseInt(viewModel1.InsertDate.substr(6)))
    } 
    return date;
}

【问题讨论】：

你真的不应该在这样的函数中applyBindings。应用一次，然后将更改推送到您的视图模型。绑定将使视图保持最新。
我不确定我明白你的意思。
对ko.applyBindings() 的调用只能一次。一旦应用了绑定，任何带有数据绑定的 HTML 都会在视图模型更新时得到更新。如果这仍然没有意义，请考虑阅读 Knockout 教程。
好的，我认为这是有道理的。但即使我将 ko.ApplyBindings() 移到函数之外，它仍然不会改变我无法从 GetFormattedDate() 内部访问 viewModel 的事实。
是的，一旦 jsfiddle 备份，我会调查，但即使你让它工作，它也是一个非常脆弱的设计。 Knockout 旨在与 MVVM 模式一起使用；这些功能应该在视图模型上。适当的设计将大大有助于防止这些问题的出现。

标签： knockout.js

【解决方案1】：

您将viewModel1 传递给GetAnswersAndComments。在函数内部，您有一个对viewModel1 的引用的本地副本，这个本地副本称为currentViewModel。

然后使用currentViewModel = ko.mapping.toJS(result); 设置该局部变量。这不会触及viewModel1，因此它仍然未定义。基本的Javascript

【讨论】：