knockout从函数中访问observable

Posted 2021-05-05

我对这个问题很困惑。 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"/>

答案

起初我对你在这里得到的东西非常困惑。即使在这一点上，我仍然不完全确定。但这是我最好的帮助你的尝试。

正如我所理解的那样，你要解决的主要问题是所谓的“保湿”问题。这是一个懒惰的执行过程，以填补其他东西。您还可以将其视为“重置”某事物状态的一种方式。下面是我如何解决这个问题的片段，例证了水合作用的两面。

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更新了关于模糊事件的观察点，textInput关键字。您可以决定哪种方式最适合您。

HTML

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

重要的是要注意，如果您希望扩展此解决方案，最好将视图模型函数（不是可观察的）应用于类的原型。像这样：

function AppModel(){
    var self = this;

    self.User = {};
};

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

    var user = new User();

    self.User(user);
};

作为旁注，通过查看您的代码，您可能对如何“整理”淘汰解决方案缺乏一点了解。我强烈建议您查看淘汰网站上提供的tutorials，以便更好地了解建筑。此外，由淘汰赛团队成员Ryan Niemeyer设计的video虽然陈旧，但仍然非常相关。