-1

小さな todo リスト アプリケーションで SAPUI5 フレームワークをテストしています。データベースがあり、REST サービスを介してデータにアクセスしています。すべてを UI に取り込み、UI からデータベースに取り込むことができます。

ただし、UI に表示しているテーブルにマップされている JSON モデルにデータベース データの参照を保存しています。要素を追加/削除しようとすると、データベースへの書き込みは正しく行われているように見えますが、インターン モデル変数は異なる関数呼び出し (たとえば、"initToDoModel" と "addToDo") の間で参照を失います。コードは次のとおりです。

  sap.ui.controller("sapui5_test.SAPUI5_Test", {

  //THIS IS THE REFFERENCE
  todoModel : null,            

        addTodo : function(text) {  
            this.doAjax("/add", {  
                text : text  
            }).done(function(todo) { 

                //HERE todoModel IS UNDEFINED BUT WAS SET IN initTodoModel
                this.todoModel.getProperty("/").push(todo); 
                this.todoModel.updateBindings();
                this.getView().rerender(); 
            });  
        },  

        initTodoModel : function() {    

            var oModel = new sap.ui.model.json.JSONModel();
            var aData = jQuery.ajax({
                type : "GET",
                contentType : "application/json",
                url : "http://sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/rest/todo/init/",
                dataType : "json",
                async: false,
                success : function(data,textStatus, jqXHR) {

                    oModel.setData({modelData : data});

                    //HERE THE todoModel IS SET
                    this.todoModel = oModel;
                    alert("Ok");
                }

            });
            return oModel;
        },  

        doAjax : function(path, content, type, async) {  
            var params = {  
                url : "http://sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/rest/todo" + path,  
                dataType : "json",  
                contentType : "application/json",  
                context : this, 
                //async : false,
                cache : false  
            };  

            params["type"] = type || "POST";  

            if (async === false) {  
                params["async"] = async;  
            }  

            if (content) {  
                params["data"] = JSON.stringify(content);  
            }  

            return jQuery.ajax(params);  
        },  

        getTodo : function(id) {  
            var index, todo;  

            jQuery.each(this.todoModel.getProperty("/"), function(i, t) {  
                if (t.id === id) {  
                    index = i;  
                    todo = t;  
                }  
            });  

            return {  
                index : index,  
                todo : todo  
            };  
        }

    });

そのため、ページが読み込まれるたびに initToDoModel 関数が呼び出され、db からデータが取得され、それが JSONModel オブジェクトにマップされます。次に、ページの [追加] ボタンをクリックすると、addToDo 関数が呼び出され、現時点では定義されていないキャッシュされた JSONModel を更新する必要があります。

私はJavaScriptが初めてなので、誰かがそこで何が起こっているのか説明できるかもしれません.

4

1 に答える 1

5

AJAX コールバックの内部で使用できます。オブジェクトconsole.log(this);を参照していることがわかるでしょう。window

thisAJAX 呼び出しの前に、必要なコンテキストを変数に格納することで、現在のオブジェクトへの参照を維持できます。

addTodo : function(text) {  
        var that = this;
        this.doAjax("/add", {  
            text : text  
        }).done(function(todo) { 

            //HERE todoModel IS UNDEFINED BUT WAS SET IN initTodoModel
            that.todoModel.getProperty("/").push(todo); 
            that.todoModel.updateBindings();
            that.getView().rerender(); 
        });  
    },
于 2013-11-22T17:21:11.437 に答える