0

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

使用输入元素更新文档。视图被更新调用 updateView 函数（打开文档、撤消/重做、小玩意...）。

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

谢谢

4

1 回答 1

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

我希望它有所帮助。

于 2013-07-22T11:00:06.083 回答