1

ドメインモデル

var Question = function(text, answerType){
    this.id = 0
    this.text = text;
}

var Form = function(){
    this.questions = [] 
    this.addQuestion = function(question){
        question.id = this.questions.length + 1
        this.questions.push(question)
    }
}

フォームをレンダリングします

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    this.render = function(form){
       // how to access renderQuestion member of FormRenderer within the higher-order function?
       $(form.questions).each( function(){ **this.renderQuestion(form, this) }**) 
    }

    this.renderQuestion = function(form, question){
        var questionDomId = "question" + question.id

        var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/><br/><br/>'
        var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

        // how do i access wrapperSelector member of FormRender when renderQuestion is called as higher-order function?
        **$(this.wrapperSelector).append(questionWrapper)** 
    }
}

クライアントコード

var q1= new Question("question1", "Text Box")
var form = new Form()
form.addQuestion(q1)

var formRenderer = new FormRenderer()
formRenderer.render(form)

質問はタイトルと同じです。上記の特定の例について、Javascriptのコメントで助けを求めました。どんな助けでも大歓迎です。

4

4 に答える 4

1

オブジェクトへの参照を次のように保存する必要があります。

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    this.render = function(form){
       $(form.questions).each( this.renderQuestion) ;
    }

   var self = this; // <--------------- 

   this.renderQuestion = function(form, question){
        var questionDomId = "question" + question.id

        var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/><br/><br/>'
        var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

        // now use self instead of this
        $(self.wrapperSelector).append(questionWrapper);
    }
}
于 2012-10-20T11:15:08.377 に答える
0

Pumbaa80 と Bergi からの入力に基づいて、問題を解決するために少し再構築する必要がありました。回答ありがとうございます。

var FormRenderer = function(){
    this.render = function(form){
        var formEventHandler = new FormEventHandler(form)
        $(form.questions).each(new RenderQuestion(formEventHandler).render)
    }

    RenderQuestion = function(formEventHandler){
        this.formEventHandler = formEventHandler
        this.wrapperSelector = "#wrapper"
        var self = this
        this.render = function(index, question){
            var questionDomId = "question" + question.id

            // generate elements
            var questionText = '<input type="text" size="75" name="questionText" value="'+ question.text +'" /><br/>'
            var questionWrapper  = "<div id='" + questionDomId + "'>" + questionText + "</div>"

            // append to dom
            $(self.wrapperSelector).append(questionWrapper)
        }
    }
}
于 2012-10-20T12:51:38.113 に答える
0

this以下のように呼び出して、メンバー関数内で親オブジェクトのインスタンスを取得できます。

がobjectインスタンスであり、その中でインスタンス自体にfuncなりたいメンバー関数である場合、メンバー関数を次のように呼び出すことができます。this

obj.func.call(obj, <params>);

それ以外の

object.func(<params>);

あなたの場合、これは次のようになります。

var fR = new FormRenderer(<params>);
...
fR.renderQuestion.call(fR, <params>);

外と同じようにrenderQuestion使えます。thisすなわち

var FormRenderer = function(){
    this.wrapperSelector = "#wrapper"
    ...
    this.renderQuestion = function(form, question){

        // this refers to the object itself, so you can call        
        $(this.wrapperSelector).append(...);
    }
}
于 2012-10-20T11:33:02.357 に答える
0

使用しないでください-参照を異常なものjQuery.eachに変更します。次のようにES 5.1と通常をthis使用できます。bindforEach

FormRenderer.prototype.render = function(form) {
    form.questions.forEach(this.renderQuestion.bind(this, form));
};

古典的な for ループを使用することをお勧めします。これは、高次のものよりもはるかに読みやすく、高速です。

FormRenderer.prototype.render = function(form) {
    for (var i=0; i<form.questions.length; i++)
        this.renderQuestion(form, form.questions[i]);
};

本当に を使用したい/使用する必要がjQuery.eachある場合は、現在のFormRendererインスタンス ( this) への参照を変数に保持する必要があります。

FormRenderer.prototype.render = function(form) {
    var renderer = this;
    $.each(form.questions, function(i) {
        renderer.renderQuestion(form, this);
    });
};
于 2012-10-20T21:21:40.143 に答える