java - 如何在 JavaFX MVC 中通过模型更新 View ？

Question

我有带有模型、 View 和 Controller 的 FXML 应用程序。我的 View 位于 .fxml 文件中，其中有这样的文本

<Text fx:id="position" text="None" GridPane.columnIndex="1" GridPane.rowIndex="3">
   <font>
      <Font name="System Bold" size="18.0" />
   </font>
</Text>

我的 Controller 看起来像这样

public class Controller{

   @FXML
   private Text position;

   public void updatePosition(String text){
      position.setText(text);
   }
}

在我的模型中，我有字符串变量，它在我的整个项目中都在变化。模型看起来像这样

public class Model {

   public String position = "None";

   public  String getPosition() {
      return tactic;
   }

   public void setPosition(String position) {
      this.position = position;
   }
}

我的项目中还有另一个类，它调用 setPositon 方法并更新变量位置。当有人更改模型类中的位置变量时，有没有办法更改我 View 中的文本？

Answer 1

你需要观察模型。在 JavaFX 中执行此操作的最简单方法是使用 JavaFX properties来表示数据。

public class Model {

    private final StringProperty position = new SimpleStringProperty("None");

    public StringProperty positionProperty() {
        return position ;
    }

    public final String getPosition() {
        return positionProperty().get();
    }

    public final void setPosition(String position) {
        positionProperty().set(position);
    }
}

现在您只需将文本的 textProperty() 绑定(bind)到模型的 positionProperty() 即可，如果模型的位置发生更改，文本将自动更新:

public class Controller{

   @FXML
   private Text position;

   private Model model ;

   public void initialize() {
       position.textProperty().bind(model.positionProperty());
   }

   // ...
}

现在唯一棘手的部分是确保 Controller 具有对正确模型实例的引用。最好的方法是为采用模型的 Controller 提供一个构造函数:

public class Controller {

   @FXML
   private Text position;

   private final Model model ;

   public Controller(Model model) {
       this.model = model ;
   }

   public void initialize() {
       position.textProperty().bind(model.positionProperty());
   }

   // ...
}

现在的问题是，通过 FXMLLoader 创建 Controller 的默认机制依赖于零参数构造函数，因此它不起作用。因此，您需要从 FXML 文件中删除 fx:controller 属性并“手动”设置 Controller :

Model model = new Model(); // or just reference to existing model...

FXMLLoader loader = new FXMLLoader(getClass().getResource("View.fxml"));
loader.setController(new Controller(model));
Parent root = loader.load();
// ...

model.setPosition("Left"); // will update text in view

参见Passing Parameters JavaFX FXML了解将模型(或其他数据)传递给 Controller ​​的更多方法。

另请参阅相关问题 Applying MVC With JavaFx