Question

我正在学习骨干/下划线，我发现我越是脱离教程中真正基本的东西，就越会意识到教程并没有教会我什么。

我目前的问题是将变量传递给视图。我有三个不同的模板可用，但它们都呈现相同，所以我希望在从集合中呈现时，只传递要用于视图的模板。我认为可行的只是在调用视图时添加一个属性，然后使用this.options.Property访问它，但是这会抛出一个错误，即属性未定义。

我尝试过多种变体选项，但似乎没有任何效果。我做错了什么？

谢谢你的到来。

var ProjectListView = Backbone.View.extend({
    el: '#projectList',
    initialize: function() {
      this.collection = masterProjectList;
      this.render();
    },
    render: function() {
      this.$el.html("");
      this.collection.each(function(project) {
            this.renderItem(project);
      }, this);
    },
    renderItem: function(project) {
      var projectView = new ProjectView({model: project, projectType: '#theatricalProjectTemplate' });
    // Passing in the project type, which determines which template gets used
      this.$el.append(projectView.render().el);
    }
  });

  var ProjectView = Backbone.View.extend({
    tagName: "div",
    className: "project-wrap",
    template: _.template($(this.options.projectType).html()),
        // use this.options to access the value

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

Answer 1

当您定义ProjectView：

时

var ProjectView = Backbone.View.extend({
  //...
  template: _.template($(this.options.projectType).html()),
  //...
});

你正在执行一些代码（即调用extend），在这种情况下，this将成为全局对象（浏览器中的AKA window）并且可能不会拥有options财产。如果您要使用传递给projectType构造函数的ProjectView选项，请将template作业移至initialize：

var ProjectView = Backbone.View.extend({
  tagName: "div",
  className: "project-wrap",
  initialize: function() {
    this.template = _.template($(this.options.projectType).html());
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

这假定projectType将是一个有效的jQuery选择器，您可能希望使用'#' + this.options.projectType，但我不确定projectType中究竟会是什么。

Answer 2

mu is too short是正确的，如果您按如下方式定义template方法，则可以与template的所有实例共享ProjectView方法：

var ProjectView = Backbone.View.extend({
  tagName: "div",
  className: "project-wrap",
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  template: function() {
    return _.template($(this.options.projectType).html());
  }
});

传递到主干视图的变量未定义

2 个答案: