Question

我在TypeScript中开发了一个库，用于执行适合Internet Spaceships所需的计算。图书馆本身到目前为止都很出色，但我很难将它连接到交互式HTML用户界面。我现在正试图让它与Knockout一起工作，但如果它能让这个特殊任务变得更容易，我愿意使用另一个框架。

我遇到的具体问题是如何绑定到普通的JS函数结果。初始页面使用初始适当的值进行奇妙渲染，但是当我在业务对象上更改单独的相关字段时，绑定值不会更新。

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

按原样保留库并使用Knockout observable开发一个viewmodel，以便在计算值时调用依赖的observable。
重做库以包含核心的Knockout observable。
找出一些手动引入依赖矩阵的方法（基本上将此信息强制提供给Knockout）。

我真的更愿意不做＃2，因为它似乎本质上是一个不可逆转的决定，我想将库保持为普通的JS（TS）并与其UI分离，因为它可能在node.js中有用。或其他Knockout不太合适的场景（如果我错了，请纠正我）。

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

因此，我留下了＃1，我通过引入假的observable和手动刷新方法来伪造Knockout这个不太聪明的想法，当UI想要刷新东西时，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知道使用“Seq”observable的RefreshAll方法。这意味着knockout会将shipStructureHP（）记录为依赖于Seq，因此每当我增加Seq时，绑定到shipStructureHP（）的元素都应该重新渲染。

这感觉就像一个主要的黑客，所以我无法想象我在这里做正确的事情（永远不要在它多次调用刷新的错误）。

我不需要支持旧版浏览器，因此如果将功能转换为ES5属性会有所帮助，我可以这样做。我对如何让Knockout（或类似的库）进行数据绑定以及将我的业务库保留为普通JS的任何建议持开放态度。有没有比我的假依赖想法更好的方法呢？最好不要让我在UI中复制大部分业务库只是为了获得可绑定的视图模型。

感谢。

Knockout绑定到普通的JS业务层

0 个答案: