2013-07-22 163 views
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__" ]); 
} 

感谢

回答

0

您可以添加一个名为silentUpdate禁用事件亨德勒场。

function makeObservable() { 
    var ob = ko.observable(0.0); 
    ob.subscribe(function (val) { 
     if(_viewModel.silentUpdate) return; 
     updateDocument(ko.toJSON(_viewModel)); 
    }); 
    return ob; 
} 


function Transform() { 
    this.silentUpdate = false; 
    ... 
} 

function updateView(jsonDocument){ 
    _viewModel.silentUpdate = true; 
    var jsonDocument = JSON.parse(jsonDocument);   
    _viewModel.x(jsonDocument[ "x" ]); 
    ... 
    _viewModel.__type__(jsonDocument[ "__type__" ]); 
    _viewModel.silentUpdate = false; 
} 

我希望它有帮助。

+0

非常感谢,这并不完全是我正在寻找的解决方案,但仍然很有效。 – Sam