0

我在 TypeScript 中开发了一个库，可以执行安装 Internet Spaceships 所需的计算。到目前为止，该库本身的表现非常出色，但我无法将其连接到交互式 HTML UI。我现在正试图让它与 Knockout 一起工作，但如果它使这个特定任务更容易，我愿意使用另一个框架。

我遇到的具体问题是如何绑定到普通的 JS 函数结果。初始页面以适当的初始值完美呈现，但是当我更改业务对象上的单独相关字段时，绑定值不会更新。

从阅读到这个，似乎解决这个问题的方法是：

  1. 将库保持原样并使用 Knockout observables 开发一个视图模型，以便在计算值时调用依赖的 observables。
  2. 重做库以将 Knockout observables 包含在核心中。
  3. 找出一些手动引入依赖矩阵的方法（基本上是将此信息强制输入 Knockout）。

我真的不想做#2，因为它似乎本质上是一个不可逆转的决定，我希望将库保持为纯 JS (TS) 并与其 UI 分开，因为它可能在 node.js 或其他场景中有用淘汰赛不太合适的地方（如果我错了，请纠正我）。

我找不到有关如何执行 #3 的任何信息，但可能是我没有得到正确的关键字。

所以这让我有了#1，我有一个不太聪明的想法，即通过引入一个假的 observable 和一个手动刷新方法来伪造 Knockout，当 UI 想要刷新时必须调用该方法。#1 还导致我基本上必须编写我的库两次——一次用于计算，一次用于呈现。

我在这里模拟了一个非常简单的#1：http: //jsfiddle.net/wxks8/6/

例子：

var myViewModel = {
    ship: ko.observable(theShip),
    seq: ko.observable(1)
};

myViewModel.refreshAll = function () {
    myViewModel.seq(this.seq() + 1);
};


myViewModel.shipStructureHP = ko.computed(function () { var x = this.refreshAll(); return theShip.structureHP(); }, myViewModel);

var myCode = {};
myCode.setSkills = function (theSkillLevel) {
    myViewModel.ship().pilot.skills.SetAllSkills(theSkillLevel);
    myViewModel.refreshAll();
}

在上面的例子中，shipStructureHP() ko.computed 函数调用了 Knockout 知道的 RefreshAll 方法，它使用了“Seq” observable。这意味着敲除将 shipStructureHP() 记录为依赖于 Seq，因此每当我增加 Seq 时，绑定到 shipStructureHP() 的元素都应该重新渲染。

这感觉像是一次重大的黑客攻击，所以我无法想象我在这里做的是正确的事情（更不用说它多次调用刷新的错误）。

我不需要支持旧版浏览器，所以如果将函数转换为 ES5 属性会有所帮助，我可以这样做。我愿意接受任何有关如何让 Knockout（或类似库）执行此数据绑定的建议，同时将我的业务库保留为纯 JS。有没有比我的假依赖想法更好的方法来做到这一点？最好是不需要我在 UI 中复制大部分业务库只是为了获得可绑定的视图模型。

谢谢。

4

0 回答 0