Backbone.js 일 시작 그 5 사건 처리

저번 보도에서 발견된 기술 오류로 인한 행위 차이를 알아차렸기 때문에 필기를 한다.
나는 모델을 초기화할 때 이벤트를 정의해 보았다.기본적으로 간단한 기술 오류이지만 완전히 다른 행동을 보이기 때문에 아래에 기술 모델을 적는다.on('change:name',function(){}) on('change :name',function(){}) on('change: name',function(){}) on('change : name',function(){})프로그램이 속성을 정의한 change 이벤트를 처리할 때 on('change:name',function(){}) 이벤트로 기술하지만, 공간에 넣지 않으면 행동이 다르다.가장 큰 문제는 틀리지 않는다는 것이기 때문에 알아차리기 어렵다.

소스 코드

    <script type="text/javascript">
    (function() {
        //----------
        // Model作成
        //----------
        var Person = Backbone.Model.extend({
            //Attribute(属性)
            defaults: {
                name: "None",
                age: 0
            },
            //コンストラクタ
            initialize: function(){
                console.log("初期化処理開始 : " + this.get("name"));
                //イベント定義
                this.on('change:name', function(){
                    console.log("名前が変わりました。");
                }),
                this.on('change:age', function(){
                    console.log("年齢が変わりました。");
                })
                console.log("初期化処理修了 : " + this.get("name"));
            }
        });
        //モデルのインスタンス化 
        var none = new Person();
        none.set('name','ほげほげ');
        //表示
        console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");
        none.set('age',26);
        //表示
        console.log("私は、" + none.get('name') + " " + none.get('age') + "歳です。");
    })();
    </script>

공백 없음 ※ 정확한 기술

//コンストラクタ
initialize: function(){
    console.log("初期化処理開始 : " + this.get("name"));
    //イベント定義
    this.on('change:name', function(){
        console.log("名前が変わりました。");
    }),
    this.on('change:age', function(){
        console.log("年齢が変わりました。");
    })
    console.log("初期化処理修了 : " + this.get("name"));
}
});

공간이 있을 때(앞) ※ 기술 오류 1

//コンストラクタ
initialize: function(){
    console.log("初期化処理開始 : " + this.get("name"));
    //イベント定義
    this.on('change :name', function(){
        console.log("名前が変わりました。");
    }),
    this.on('change :age', function(){
        console.log("年齢が変わりました。");
    })
    console.log("初期化処理修了 : " + this.get("name"));
}
});

공간(후)이 있을 경우 ※ 기술 오류 2

//コンストラクタ
initialize: function(){
    console.log("初期化処理開始 : " + this.get("name"));
    //イベント定義
    this.on('change: name', function(){
        console.log("名前が変わりました。");
    }),
    this.on('change: age', function(){
        console.log("年齢が変わりました。");
    })
    console.log("初期化処理修了 : " + this.get("name"));
}
});

공간(양쪽)이 있을 경우 ※ 기술 오류3

//コンストラクタ
initialize: function(){
    console.log("初期化処理開始 : " + this.get("name"));
    //イベント定義
    this.on('change : name', function(){
        console.log("名前が変わりました。");
    }),
    this.on('change : age', function(){
        console.log("年齢が変わりました。");
    })
    console.log("初期化処理修了 : " + this.get("name"));
}
});

결론


우선, 오류 2를 기술한 공간(후)이 change 변경 처리 프로그램에 대해 대기 공간+속성: name과 같은 속성이 있습니다.물론 이런 속성이 존재하지 않기 때문에 원래 이벤트 처리 프로그램이라고 불리지 않는다.
이어 오류1을 기술하는 유공간(전)과 오류3을 기술하는 유공간(쌍방)의 행동은 변화+공간change :이라는 처리 프로그램을 정의했다.그러나 활동 처리 프로그램은 모두 불린다.이 점에 관해서는 솔직히 나는 어떤 원리로 인해 생긴 것인지 모르겠다.
나는 만약 나에게 그 행동의 구조를 건의할 수 있다면, 당분간 마음속에 잘못 기술한 일은 하지 않겠다고 생각한다.

좋은 웹페이지 즐겨찾기