javascript - JavaScript 中的 MVC : model returns undefined

Question

我正在尝试用 javascript 制作 MVC。

型号:

function Model() {
    this._productsList = [];
    this._suppliersList = [];
}

查看:

function View(model) {
    this._model = model;
    this._drawLogin();
    this._drawBoard;
    this._drawAddForm;
}

Controller :

function Controller(view, model) {
    this._view = view;
    this._model = model;
}

我按以下顺序设置它们:

var model = new Model();
var view = new View(model);
var controller = new Controller(view, model);

在我看来，我想迭代我的 vendor 列表:

this._model._suppliersList.forEach(function(supplier) {
    $('#supplier-select').append('<option class="supplier-option" value="' + supplier.name + '">' + supplier.name + '</option>');
})

当我在 View 构造函数中使用 console.log(this._model) 时，它返回:

Object { _productsList: Array[0], _suppliersList: Array[0] }

在我看来，我有一个函数._drawAddForm。我想获取我的模型 vendor 列表:

this._model._suppliersList.forEach(function(supplier) { console.log(supplier) });

我收到一条错误消息:this._model 未定义。我不明白为什么，有人可以帮助我理解吗？

完整查看页面如下:

function View(model) {
    this._model = model;
    this._drawLogin();
    this._drawBoard;
    this._drawAddForm;
}

View.prototype._drawLogin = function() {
    $('#header').empty();
    $('#header').append('<input class="loginField" id="loginName" type="text" placeholder="Utilisateur">');
    $('#header').append('<input class="loginField" id="loginPass" type="password" placeholder="Mot de passe">');
    $('#header').append('<span id="lockIcon" class="ui-icon ui-icon-locked"></span>');
    $('#header').append('<div id="loginError"></div>');
    $('body').append('<div id="board"></div>');
    $('#lockIcon').hover(
      function() {
        $(this).attr('class','ui-icon ui-icon-unlocked');
      }, function() {
        $(this).attr('class','ui-icon ui-icon-locked');
      }
    )
    $('#lockIcon').click(function(){
        tryLogin();
    });
}

View.prototype._drawBoard = function () {
    $('#board').remove();
    $('body').append('<div id="board"></div>');
    $('#board').addClass('animated fadeIn');

    /* Display the header */
    $('#board').append('<div id="board-header"></div>');
    $('#board-header').append('<div class="product-header-field" id="product-header-id">Identifiant produit</div>');
    $('#board-header').append('<div class="product-header-field" id="product-header-stock">Stock disponible</div>');
    $('#board-header').append('<div class="product-header-field" id="product-header-condition">État</div>');
    $('#board-header').append('<div class="product-header-field" id="product-header-new">Usure</div>');
    $('#board-header').append('<div class="product-header-field" id="product-header-from">Provenance</div>');

    /* Display products */
    $('#board').append('<div id="board-products"></div>');

    /* Add product button */
    $('#board').append('<div id="add-product-button">Ajouter un article</div>');
    $('#add-product-button').click(this._drawAddForm);
}

View.prototype._updateLogin = function(data) {
    if (data!='success') {
        $('#loginError').append('Utilisateur ou mot de passe incorrect');
    }
    else {
        $('#header').empty();
        $('#header').append('<span id="lockIcon" class="ui-icon ui-icon-unlocked"></span>');
        $('#lockIcon').hover(function() {
            $(this).attr('class','ui-icon ui-icon-locked');
            }, function() {
                $(this).attr('class','ui-icon ui-icon-unlocked');
            })
            $('#lockIcon').click(function(){
                this._drawLogin();
            });
        this._drawBoard();

    }
}

View.prototype._drawAddForm = function () {
    var radioInputs;
    $('#board').append('<div id="product-form"></div>');
    $('#product-form').append('<div id="product-form-title">Formulaire : Ajout de produit</div>');
    $('#product-form').append('<hr width="50%">');

    /* supplier form*/
    $('#product-form').append('<div id="supplier-form"></div>');
    $('#supplier-form').append('<div id="supplier-form-box"></div>')
    $('#supplier-form-box').append('<div id="supplier-form-typo">Informations fournisseur</div>');
    $('#supplier-form-box').append('<div id="supplier-form-select"></div>');
    $('#supplier-form-select').append('<select id="supplier-select"></select>');
    $('#supplier-select').append('<option class="supplier-option" value="" disabled selected>Renseignez un fournisseur</option>');
    this._model._suppliersList.forEach(function(supplier) {
        $('#supplier-select').append('<option class="supplier-option" value="' + supplier.name + '">' + supplier.name + '</option>');
    })
    $('#supplier-select').append('<option class="supplier-option" value="newsupplier">Ajouter un nouveau fournisseur</option>');
    $('#supplier-form').append('<div id="supplier-form-new"></div>');
    $('#supplier-select').change(function() {
        if ($(this).val()=='newsupplier') {
            $('#supplier-form-new').empty();
            $('#supplier-form-new').append('<div class="supplier-form-field"><div class="supplier-form-typo">Nom du fournisseur</div><input id="supplier-form-name" class="input-supplier-field" type="text" placeholder="Nom du fournisseur"></div>');
            radioInputs = '<div class="radio-box"><div class="radio-option"><input id="supplier-form-type" name="supplier-form-type" type="radio" value="individual"><div class="radio-value">Particulier</div></div>';
            radioInputs += '<div class="radio-option"><input id="supplier-form-type" name="supplier-form-type" type="radio" value="professional"><div class="radio-value">Professionnel</div></div></div>';
            $('#supplier-form-new').append('<div class="supplier-form-radio"><div class="supplier-radio-typo">Particulier/Professionnel</div>' + radioInputs + '</div>');
            $('#supplier-form-new').append('<div class="supplier-form-field"><div class="supplier-form-typo">Téléphone</div><input id="supplier-form-phone" class="input-supplier-field" type="text" placeholder="Téléphone"></div>');
            $('#supplier-form-new').append('<div class="supplier-form-field"><div class="supplier-form-typo">Adresse founrisseur</div><input id="supplier-form-adress" class="input-supplier-field" type="text" placeholder="Adresse du fournisseur"></div>');
        } 
        else {
            $('#supplier-form-new').empty();
        }
    })

    /* product form */
    $('#product-form').append('<div id="product-form-details">Informations produit</div>');
    $('#product-form').append('<div class="product-form-field"><div class="product-form-typo">Identifiant produit</div><input id="product-form-id" class="input-product-field" type="text" placeholder="Identifiant produit"></div>');
    $('#product-form').append('<div class="product-form-field"><div class="product-form-typo">Stock initial</div><input id="product-form-stock" class="input-product-field" type="text" placeholder="Stock initial"></div>');
    radioInputs = '<div class="radio-box"><div class="radio-option"><input id="product-form-condition" name="product-form-condition" type="radio" value="broken"><div class="radio-value">Défectueux</div></div>';
    radioInputs += '<div class="radio-option"><input id="product-form-condition" name="product-form-condition" type="radio" value="functional"><div class="radio-value">Commercialisable</div></div></div>';
    $('#product-form').append('<div class="product-form-radio"><div class="product-radio-typo">État</div>' + radioInputs + '</div>');
    radioInputs='<div class="radio-box"><div class="radio-option"><input id="product-form-new" name="product-form-new" type="radio" value="used"><div class="radio-value">Occasion</div></div>';
    radioInputs += '<div class="radio-option"><input id="product-form-new" name="product-form-new" type="radio" value="new"><div class="radio-value">Neuf</div></div></div>';
    $('#product-form').append('<div class="product-form-radio"><div class="product-radio-typo">Neuf/Occasion</div>' + radioInputs + '</div>');
    $('#product-form').append('<div class="product-form-field"><div class="product-form-typo">Provenance</div><input id="product-form-from" class="input-product-field" type="text" placeholder="Provenance"></div>');

    /* change add product button */
    $('#add-product-button').text('Valider le formulaire');
    $('#add-product-button').off();
    $('#add-product-button').click(function() {
        fieldList = [];
        fieldList.push(
                $('#supplier-select').val(),
                $('#supplier-form-name').val(),
                $('#supplier-form-type').val(),
                $('#supplier-form-phone').val(),
                $('#supplier-form-adress').val(),
                $('#product-form-id').val(),
                $('#product-form-stock').val(),
                $('#product-form-condition').val(),
                $('#product-form-new').val(),
                $('#product-form-from').val()       
        )
        submitNewProduct(fieldList);
    })
}

Answer 1

你应该更换

$('#add-product-button').click(this._drawAddForm);

与

$('#add-product-button').click(this._drawAddForm.bind(this));

或

$('#add-product-button').click($.proxy(this._drawAddForm, this));

为什么？因为 this._drawAddForm 是在变量中传递的，当这样的事情完成时，方法的上下文(即 this)就失去了它的身份并形成了另一个身份。如果可用，请使用.bind，否则使用$.proxy，两者都执行相同的操作，将this强制绑定(bind)到函数_drawAddForm。

访问此链接可以更深入地了解正在发生的事情。 10-most-common-javascript-mistakes