KnockoutJS映射-只需从服务器中填写我需要的内容

KnockoutJS Mapping - just fill in what I need from the server

本文关键字:-只 映射 服务器 KnockoutJS      更新时间:2023-09-26

我认为我能够使用KO映射插件的一种直观方法是创建一个裸视图模型,只使用我需要的任何计算的可观测值,然后每当服务器结果出来时用fromJS更新vm。我假设会添加缺失的属性,并更新现有的属性。

我想我可以在document.ready上将这个裸ViewModel绑定到我的dom,任何丢失的属性都显示为空白。然后,当ajax回调触发,映射库添加新属性时,dom将更新。

我看到的结果似乎表明这是不可能的,我想确保我没有错过任何东西。

代码如下,但我发现的三个主要问题是:

  • 如果dom绑定到ViewMoel中缺少的属性,那就是一个错误。这并不奇怪,尤其是考虑到以下来自@madcapnmckay的清晰解释。

  • 如果计算的可观察对象引用了ViewModel中不存在的视图模型属性,则这是一个错误。我认为情况就是这样,因为所有computedObservable都会立即执行,这样KO就可以跟踪computedObservable依赖于哪些可观察属性。

  • 最具破坏性的是,如果现有ViewModel最初是用fromJS创建的,则该ViewModel似乎只能用fromJS更新。在代码中,fromJS看起来像是在第二个参数中检查映射属性(如果传递了一个)。

我不需要任何帮助来解决这个问题。我已经想出了一个简单的方法来处理这一切;我只想确保上面三颗子弹中没有一颗我遗漏的简单东西会让事情变得更容易。


VM:

    var vm = new (function () {
        this.prettyName = ko.computed(function () {
                return this.title() + " " + this.name();
        }, this);
    })();

"AJAX"结果:

    var serverObj = {
        title: 'Mr.',
        name: 'Adam Rackis',
        degreeValue: 2,
        degreeTypes: [{ val: 1, txt: 'Bachelors' }, { val: 2, txt: 'Masters' }, { val: 3, txt: 'PhD'}]
    };

HTML

<div id="educationPane">
    Name: <input type="text" data-bind="value: prettyName" />
    Degree: <select data-bind="{foreach: degreeTypes, value: degreeValue}">
                <option data-bind="{text: text, value: val}"></option>
            </select>
</div>

我在使用KO时遇到了所有这些相同的问题。在我看来,第1点和第2点只是KO工作方式的结果。

  • 当dom绑定到不存在的属性时,绑定需要订阅可观察到的或显示属性值才能工作。如果随后将该属性添加到viewModel中,绑定怎么会知道发生了这种情况?(一个更复杂的解决方案是允许viewModel对象本身是可观察的,但这是另一回事)
  • 当创建了一个计算的可观测值时,它的包含函数会立即被评估,这样就可以记录对可观测值的订阅,并且计算的可观察值可以在需要时重新评估。如果不存在可观察性(即时错误,可以通过测试修复),或者在计算的评估中没有命中,则不会再次评估
  • -

我承认第三点很痛苦。我不知道这样做的原因。也许有一些很好的理由。至少,一个只更新属性而不从集合中删除的"更新"方法会很有用。

希望这能有所帮助。

相关文章: