JavaScript中的MVC：模型返回undefined

我試圖在JavaScript中創建一個MVC。JavaScript中的MVC：模型返回undefined

型號：

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

查看：

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

控制器：

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

在我看來，我想通過我的suppliersList迭代：

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

當我在查看構造CONSOLE.LOG（this._model），它返回：

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

在我看來我有一個函數._drawAddForm。我想要取消我的模型供應商清單：

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

來源

2016-02-28 Aod Ren

'this'是神奇的，沒有看到'this._model._suppliersList.forEach（function（supplier）{console.log（supplier）}）;'函數的範圍，它很難說什麼做錯了 – Datsik

是的，我不是準確的抱歉。 View.prototype._drawAddForm =函數（）{ this._model._suppliersList.forEach（功能（供應商）{我的函數}） –

你也可以鏈接確切的錯誤消息，我實在看不出這裏有什麼問題。 – Datsik

你應該做替換

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

與

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

或

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

爲什麼？因爲this._drawAddForm被傳遞給一個變量，並且當這樣的事情完成時，那麼方法的上下文（即這個）失去了它的身份並形成另一個身份。使用。綁定如果它是可用的或以其他方式使用$ .proxy，兩者都執行相同的操作，強制綁定這個函數_drawAddForm。

訪問此鏈接以更深入地瞭解發生了什麼。 10-most-common-javascript-mistakes

來源

2016-02-28 13:03:10

JavaScript中的MVC：模型返回undefined

回答

相關問題