从函数中访问 observable 的淘汰赛

Question

我对这个问题感到困惑。 Knockout 使用ko.applyBindings() 方法来更新 MVVM 模式。在下面的代码中，您可以看到我的功能。首先我创建一个空的 vm 然后我调用其他函数通过getJSON() 方法填充数据。方法运行良好。

var vm = {};
function GetData(){
  vm=GetMockData();
  LoadUserData();
  LoadCategories();
  LoadSkills();
  return vm;
}

我的困惑从这里开始，我的工作是根据用户输入存储这个值。

 <input data-bind='' placeholder="Enter your name"/>

在顶部的 HTML 部分，我想将该值绑定到 like;GetMockData().obj.User.Name。但不工作。

function GetMockData(){
    var obj={
        User:{
            Name: ko.observable().extend({
                required: true,
                minLength: 2,
                maxLength: 15
            }),
            Surname: "Fake Surname"
        }
    return obj;
}

对于applyBindings()，我调用下面的代码部分。

ko.applyBindings(new GetData());

我对以下部分感到困惑。从另一个函数调用的函数中获取User.Name，因为我不是直接从applyBindings() 而是从另一个函数到达该部分。 我应该如何称呼它为 HTML 写入数据绑定值？

<input data-bind='' placeholder="Enter your name"/>

Answer 1

起初我对你在这里的实际意思感到非常困惑。即使在这一点上，我仍然不完全确定。但这是我尽最大努力帮助您的方式。

据我了解，您要解决的主要问题是所谓的“水合作用”问题。这是一个懒惰执行的过程，用其他东西填充某些东西。您还可以将其视为“重置”某物状态的一种手段。下面是我如何解决这个问题的简单说明，举例说明了水合作用的两面。

JavaScript

function User() {
    var self = this;

    self.Name = ko.observable().extend({
        required: true,
        minLength: 2,
        maxLength: 15
    });

    self.Surname = ko.observable();

    self.Hydrate = function(){ 
        self.Surname("Fake SureName"); 
    };
};

function AppModel(){
    var self = this;

    self.User = {};

    self.Hydrate = function(){
        var user = new User();
        user.Hydrate();
        self.User = user;
    };
};

var app = new AppModel();
app.Hydrate();
ko.applyBindings(app);

现在我们已经确定了 JavaScript 方面，让我们继续讨论 DOM。为了在文本字段中接收用户的输入，您有两个主要选项：value 和 textInput。 value 在模糊事件上更新 observable，textInput 在 keyup 上更新。您可以决定哪个最适合您。

HTML

<input data-bind="textInput: User.Name" placeholder="Enter your name"/>

请务必注意，如果您希望扩展此解决方案，最好将您的视图模型函数（而不是 observables）应用到您的类的原型。像这样：

function AppModel(){
    var self = this;

    self.User = {};
};

AppModel.prototype.Hydrate = function(){
    var self = this;

    var user = new User();

    self.User(user);
};

附带说明一下，从查看您的代码来看，您似乎对如何“组合”淘汰赛解决方案缺乏一点了解。我强烈建议您查看淘汰赛网站上提供的tutorials，以更好地了解架构。此外，这个video，由淘汰赛团队成员 Ryan Niemeyer 撰写，虽然很老，但仍然非常重要。