主干.js - 如何在模板中使用自定义模型属性

Backbone.js - How to use a custom model property in a template?

本文关键字：自定义 属性 模型 js 主干      更新时间：2023-09-26
这可能是

一个非常简单的问题，但我正在寻找答案。

使用骨干，我有这样一句话：

Person = Backbone.Model.extend();

然后，我在从 URL 填充的集合中使用它。为了这个例子，假设我有一个名字和姓氏，我想做这样的事情：

Person = Backbone.Model.extend({
    FullName: this.get("firstName") + " " + this.get("lastName")
});
例如

，我可以在主干内部调用它，例如People.first（）。全名（）。但是，如果我将People.first（）传递给我的视图并在模板中呈现，它似乎不知道FullName是什么。

如何将自定义属性添加到 Backbone 中的模型并在模板中使用它？

干杯！

你的FullName定义没有任何意义，所以我假设你真的是这个意思：

Person = Backbone.Model.extend({
    FullName: function() {
        return this.get("firstName") + " " + this.get("lastName");
    }
});

通常，您将在模型上调用 toJSON 以序列化它们以供模板使用：

var html = template({ person: person.toJSON() })

默认toJSON仅返回模型内部属性的（浅表）副本。据推测，这些属性将同时具有firstName属性和lastName属性，但FullName是模型上的函数，因此它不会在属性中。

您可以提供自己的toJSON：

toJSON: function() {
    var j = _(this.attributes).clone();
    j.FullName = this.FullName();
    return j;
}

然后你的模板中就会有一个FullName。但是，toJSON也用于序列化模型以将数据发送到服务器;您的服务器最终会看到一个FullName，它可能会对此感到不安。您可以专门为模板添加另一个序列化程序：

// `serialize` is another common name for this
for_template: function() {
    var j = this.toJSON();
    j.FullName = this.FullName();
    return j;
}

然后使用该函数为模板提供数据：

var html = template({ person: person.for_template() });
我也为此

挣扎了一段时间，但我找到了解决方案。

它涵盖了相当多的深度，包括用于发送服务器数据的toJSON问题的解决方案，在主干计算属性中

var Person = Backbone.Model.extend({
    parse: function (model) {
        model.FullName = model.FirstName + ' ' + model.LastName;
        return model;
    }
});

有一个更简单的方法。 将方法包含在初始化方法中。 实例化模型时，所有方法也会实例化。

var model = Backbone.Model.extend({
 initialize : function(){
      this.myCustomMethod = function(){ return 'Something'; };
 },
 idAttribute : 'id',
 urlRoot : ''
 });

完全不同的解决方法：

Backbone.Model.extend({
  defaults: function() {
    this.set('fullName', this.fullName.bind(this))
  },
  fullName: function() {
    return this.get('firstName') + this.get('lastName');
  }
});
这是

可以直接在模型上调用"全名"函数的方式

model.fullName()

或通过get函数，允许从模板调用它：

model.get('fullName')()
相关文章：