从 Mustache 模板访问嵌套的主干模型属性

Question

我有一个 Backbone 模型，它的属性是对另一个 Backbone 模型的引用。例如，一个 Person 引用了一个 Address 对象。

Person
  FirstName
  LastName
  Address
    Street
    City
    State
    Zip

这些是扩展 Backbone 模型的类。那么，如果我构造一个像下面这样的对象......

var address = new Address({ Street: "123 Main", City: "Austin" });
var person = new Person({ FirstName: "John", Address: address });

我似乎不知道如何在我的 Mustache 模板中访问它。

Hi {{FirstName}}, you live in {{Address.City}}.

显然不起作用。当我查看 Firebug 的内部结构时，Address 是一个对象，但 City 是 Address 的属性对象中的一个属性。我找不到任何有关如何访问关联对象的这些属性的示例。

感谢您的帮助！谢谢！

Answer 1

我最终通过以下方法解决了这个问题。

我为模板引擎从 Mustache.js 切换到 Handlebars.js。这允许我使用基于路径的表达式来访问嵌套或关联的对象及其属性。

Hi {{FirstName}}. You live in {{Address.City}}.

但是，我还必须更改将 JSON 对象传递给模板的方式。我使用的是属于 Backbone.Model 类的 toJSON 方法。但是，这并没有正确地为关联的地址生成 JSON（为了模板工作）。它将地址属性埋在一个名为“属性”的成员中。所以，相反，我最终这样做了......

var jsonForTemplate = JSON.parse(JSON.stringify(person));

这给了我一个“原始”版本的对象及其关联对象，模板可以使用上面显示的语法访问它们。 JSON.parse 和 JSON.stringify 都是 json2.js 的一部分。

Answer 2

我通过制作另一个名为 deepToJSON 的 toJSON 版本来处理这个问题，它递归地遍历嵌套模型和集合。然后可以将该函数的返回值传递给 handlebars.js 模板。

代码如下：

_.extend(Backbone.Model.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    var obj = this.toJSON();
    _.each(_.keys(obj), function(key) {
      if (_.isFunction(obj[key].deepToJSON)) {
        obj[key] = obj[key].deepToJSON();
      }
    });
    return obj;
  }
});

_.extend(Backbone.Collection.prototype, {
  // Version of toJSON that traverses nested models
  deepToJSON: function() {
    return this.map(function(model){ return model.deepToJSON(); });
  }
});

Answer 3

尝试使用Handlebars，这是一个基于 Mustache 并支持嵌套属性的模板引擎。

那么它就像{{Address/City}} 一样简单。

如果您不想更改模板引擎，您可以展平来自 Address 对象的结果，并将它们作为属性直接传递给 Person。

Answer 4

在 Mustache 中实现相同的方法如下：

你好

{{FirstName}}, you live in {{#Address}}{{City}} {{/Address}}

希望对你有帮助..