Javascript 敲除绑定到普通JS业务层

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

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

通过阅读本文，解决这一问题的方法似乎是：

让库保持原样，并开发一个具有剔除观测值的viewmodel，以便在计算值时调用依赖的观测值

重做库以在核心包含淘汰观测值

找出一些手动引入依赖矩阵的方法（本质上是强制将此信息提供给Knockout）

我真的不想做#2，因为这看起来本质上是一个不可逆转的决定，我想让库保持简单的JS（TS），并与它的UI分离，因为它可能在node.JS或其他不太合适的情况下有用（如果我错了，请纠正我）

我找不到关于如何做#3的任何信息，但有可能我没有找到正确的关键字

因此，这就给我留下了#1，在这里，我有一个不太聪明的想法，通过引入一个虚假的可观察对象和手动刷新方法来假装淘汰，当UI想要刷新内容时，必须调用该方法#1还导致我必须基本上写两次我的库——一次用于计算，一次用于演示

我在这里模拟了一个非常简单的#1：

例如：

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函数调用RefreshAll方法，Knockout知道该方法使用“Seq”可观测值。这意味着knockout会将shipStructureHP（）记录为依赖于Seq，因此每当我增加Seq时，绑定到shipStructureHP（）的元素都应该重新呈现

这感觉像是一个重大的黑客，所以我无法想象我在这里做的是正确的事情（不管它在哪里多次调用刷新）

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

---

谢谢。

请澄清，您是否试图在用户界面可观察到的变化时更新JS业务模型；当业务模型发生变化时更新用户界面观察值，或者两者都发生变化？如果这只是你需要担心的第一件事，那也不算太糟。但是，是的，让你的ko观测值去“观测”非观测值是很困难的。它在整个模型中都是不同的。互联网宇宙飞船可以在不同的插槽中添加或删除不同的模块，驾驶飞船的飞行员可以在不同领域拥有不同的技能水平。这些东西需要与UI进行“双向绑定”，但这不是棘手的部分。“我将加力燃烧室安装在这艘飞船的安装槽中，因此阵列中的这个元素将发生变化，因此它包含了该模块的ID”这一说法基本上是直截了当的。我想问的部分是“如何让船上的最大速度（一个简单的JS函数）知道如何重新计算自身？”您是否考虑过使用observable.subscribe？谢谢您的建议。我只研究了knockout.mapping、knockout.viewmodel和knockout.wrap。这些似乎都不能解决我的问题。我找到了一个可行的Angular解决方案，我将进一步探索。你看过淘汰es5插件了吗？