Question

我们正在使用HTML前端（主要是视图）和python后端（主要是文档）开发桌面应用程序。

使用输入元素更新文档。更新视图调用updateView函数（打开文档，撤消/重做，gizmos ......）。

因此，我们需要在用户输入内容时通知文档。通过订阅observable并调用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__" ] );
}

由于

Answer 1

您可以添加名为silentUpdate的字段来禁用事件hendler。

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;
}

我希望它有所帮助。

敲除可观察的订阅

1 个答案: