如何在Backbone.js中将数据传递到视图?

9cbw7uwe  于 2023-10-20  发布在  其他
关注(0)|答案(1)|浏览(172)

我正在尝试将数据传递到Backbone.js中的SingleTodo视图。但是,它没有正确地通过。
为了更清楚,请参阅下面给出的代码和输出。

验证码:
temp.html

<h1>This is Temp</h1>

<div id="app"></div>

<script type="text/template" id="app-template">
  Title: <%= title %><br/>
  isCompleted: <%= isCompleted %>
</script>

temp.js

const SingleTodo = Backbone.Model.extend({
  defaults: {
    title: "",
    isCompleted: false
  }
});

const TodoView = Backbone.View.extend({
  el: "#app",
  template: _.template($("#app-template").html()),

  initialize: function () {
    this.model = new SingleTodo();
    this.render();
  },

  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

$(document).ready(function () {
  const todoView = new TodoView();

  todoView.model.set({
    title: "A simple to-do",
    isCompleted: true
  });
});

输出:
预期

得到

我的代码中有什么错误,导致我没有得到预期的输出?

j0pj023g

j0pj023g1#

您在TodoViewinitialize方法中缺少以下行:

this.listenTo(this.model, 'change', this.render);

旁白:与其在视图的initialize方法内部设置this.model,我建议从外部传递它。在您的示例中,更改$(document).ready处理程序的第一行:

const todoView = new TodoView({model: new SingleTodo()});

相关问题