0
我们正在开发一个使用HTML前端(主要是视图)和python后端(主要是文档)的桌面应用程序。Knockout observable订阅
该文档通过使用输入元素进行更新。 该视图更新调用updateView函数(打开文档,撤消/重做,小工具...)。
所以,我们需要在用户键入内容时通知文档。通过订阅observables并调用updateDocument来检测更改。
主要问题是如果视图由后端直接更新,我们不需要通知文档。
如何在不通知文档的情况下使用updateView更新视图?
查看HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jsext/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jsext/knockout-2.3.0.js"></script>
<script type="text/javascript" src="jsext/knockout.mapping.js"></script>
<script type="text/javascript" src="js/document.js"></script>
<script type="text/javascript" src="js/view.js"></script>
</head>
<body>
<div id="datas">
<div>
<p>
<label>x : </label>
<input type="text" data-bind="value: x"/>
</p>
<p>
<label>y : </label>
<input type="text" data-bind="value: y"/>
</p>
<p>
<label>z : </label>
<input type="text" data-bind="value: z"/>
</p>
<p>
<label>rx : </label>
<input type="text" data-bind="value: rx"/>
</p>
<p>
<label>ry : </label>
<input type="text" data-bind="value: ry"/>
</p>
<p>
<label>rz : </label>
<input type="text" data-bind="value: rz"/>
</p>
<p>
<label>s : </label>
<input type="text" data-bind="value: s"/>
</p>
</div>
</div>
</body>
</html>
查看JS:
var _viewModel;
var subscriptions = [];
$(document).ready(function(){
_viewModel = new Transform();
ko.applyBindings(_viewModel);
});
function makeObservable() {
var ob = ko.observable(0.0);
ob.subscribe(function (val) {
updateDocument(ko.toJSON(_viewModel));
});
return ob;
}
function Transform() {
this.__type__ = makeObservable();
this.x = makeObservable();
this.y = makeObservable();
this.z = makeObservable();
this.rx = makeObservable();
this.ry = makeObservable();
this.rz = makeObservable();
this.s = makeObservable();
}
function updateView(jsonDocument){
var jsonDocument = JSON.parse(jsonDocument);
_viewModel.x(jsonDocument[ "x" ]);
_viewModel.y(jsonDocument[ "y" ]);
_viewModel.z(jsonDocument[ "z" ]);
_viewModel.rx(jsonDocument[ "rx" ]);
_viewModel.ry(jsonDocument[ "ry" ]);
_viewModel.rz(jsonDocument[ "rz" ]);
_viewModel.s(jsonDocument[ "s" ]);
_viewModel.__type__(jsonDocument[ "__type__" ]);
}
感谢
非常感谢,这并不完全是我正在寻找的解决方案,但仍然很有效。 – Sam