0

问题出在模型中，当演示者调用它时，它不像我假设的那样工作，实际上它就像this关键字引用 [object HTMLTextAreaElement]，而不是 Model 对象一样工作。

/** PRESENTER **/

function Presenter() {
  var toolbarView;
  var outputView;
  var sourceCodeModel;
  var public = {
    setToolbarView: function (view) {
      toolbarView = view;
    },
    setOutputView: function (view) {
      outputView = view;
    },
    setModel: function (_model) {
      sourceCodeModel = _model;
    },
    init: function () {
      toolbarView.setNewTableHandler(function () {
        outputView.updateSource(sourceCodeModel.string);
      });
      toolbarView.setNewConstraintHandler(function () {
        /*stub*/
        alert("new constraint");
      });
    }
  }
  return public;
}
/** TOOLBAR VIEW **/
function toolbarView() {
  this.setNewTableHandler = function (handler) {
    $("#newTable").click(handler);
  }
  this.setNewConstraintHandler = function (handler) {
    $("#newConstraint").click(handler);
  }
}
/** OUTPUT VIEW **/
var outputView = {
  updateSource: function (newVal) {
    $("#sourcetext").val(newVal);
  },
  draw: function () {
    //stub
  }
};
/** MODEL **/
var model = new Object(); //o {};
model.source = [];
model.string = function () {
  /* ALERT(this) returns [object HTMLTextAreaElement] wtf? */
  var stringa = "";
  for (var i = 0; i < this.source.length; i++) { //this does not work, since this = HTMLTextAreaElement
    stringa += this.source[i] + "\n";
  }
  return stringa;
}
$(document).ready(function () {
  var presenter = new Presenter();
  var view1 = new toolbarView();
  presenter.setToolbarView(view1);
  presenter.setOutputView(outputView);
  presenter.setModel(model);
  presenter.init();
});

HTML 非常简单：

<!doctype html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="mvp.js"></script>
  <meta charset="UTF-8">
  <title>Titolo documento</title>
  <style type="text/css">
    /*unnecessary here*/
  </style>
</head>
<body>
  <div id="container">
    <div id="toolbar">
      <button id="newTable">New table</button>
      <button id="newConstraint">New Constraint</button>
    </div>
    <div id="source">
      <textarea id="sourcetext"></textarea>
    </div>
    <button id="update">Update</button>
    <div id="output"></div>
  </div>
</body>

</html>

我在模型对象上做错了什么？

4

3 回答 3

0

这一行：var public = {尽量不要使用public，即保留字。

于 2013-04-16T10:41:42.030 回答
0

当您将函数作为侦听器传递时，该this属性将在函数内部不可用：

var obj = {
    a: function() {
        alert(this)
    }
};
$('body').click(obj.a);

单击主体时，函数的this属性将为document.body.

为了防止这种情况，您必须绑定函数：

$('body').click(obj.a.bind(obj));

或者在旧浏览器中包装它：

$('body').click(function() {
    obj.a();
});

所以你必须在传递之前绑定函数：

outputView.updateSource(sourceCodeModel.string.bind(sourceCodeModel));

有关 javascript 函数上下文的更多信息：http ://www.quirksmode.org/js/this.html

于 2013-04-16T10:45:52.967 回答
0

一般注意，尝试将它绑定到一个变量，因为这会改变它当前所在的上下文。

/** TOOLBAR VIEW **/
function toolbarView() {
  var that = this; 
  that.setNewTableHandler = function (handler) {
    $("#newTable").click(handler);
  }
  that.setNewConstraintHandler = function (handler) {
    $("#newConstraint").click(handler);
  }
}
于 2013-04-16T10:56:26.023 回答