從小鬍子模板訪問嵌套骨幹模型屬性

我有一個Backbone模型，它具有一個對另一個Backbone模型的引用的屬性。例如，一個人有一個地址對象的引用。從小鬍子模板訪問嵌套骨幹模型屬性

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 });

我似乎無法弄清楚如何獲得它在我的鬍子模板。

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

顯然不起作用。當我查看Firebug內部時，Address是一個對象，但City是Address的屬性對象中的一個屬性。我找不到任何有關如何訪問關聯對象的這些屬性的示例。

我感謝任何幫助！謝謝！

來源

2011-06-04 Kevin

嘗試使用Handlebars，這是一個基於Mustache的模板引擎，支持嵌套屬性。

然後它就像{{Address/City}}一樣簡單。

如果你不想改變你的模板引擎，您可以拼合從Address對象的結果和他們直接傳遞爲屬性的Person。

來源

2011-06-04 14:05:19 pawlik

謝謝，我一定會嘗試手把。我仍然對Backbone的toJSON如何處理關聯模型感到好奇。它看起來（從查看Firebug）它嵌套在「屬性」成員下的相關模型的屬性。我需要測試以查看Handlebars是否可以找到地址/城市，或者我是否需要執行諸如地址/屬性/城市之類的操作。不確定。可能是一個不同的問題。 – Kevin 2011-06-04 16:42:45

@凱文嘿凱文，你有沒有想過：如何正確地址/屬性/城市？ – huyz 2012-07-31 04:52:01

我最終用下面的方法解決了這個問題。

我從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的一部分。

來源

2011-06-04 18:52:35 Kevin

噢，太棒了，這是我一直在尋找很長時間的解決方案 – huyz 2012-07-31 04:55:29

我通過使用名爲deepToJSON的另一個版本來遞歸遍歷嵌套模型和集合來處理此問題。然後可以將該函數的返回值傳遞給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(); }); 
    } 
});

來源

2011-07-08 23:06:54 gregspurrier

謝謝。我想知道這是否比我上面的方法更好。我認爲最終的結果是相似的。 – Kevin 2011-07-12 15:45:00

我想性能差不多。代碼可讀性和錯誤的最小化在這裏是有益的，imo。 – 2011-08-03 17:27:08

謝謝你。在遞歸調用deepToJSON之前，我必須稍微修改一下你的對象以檢查null的對象值：'if（！（_。isNull（obj [key]）|| _.isUndefined（obj [key]））&& _.isFunction（obj [key] .deepToJSON））{' – 2011-10-14 19:09:38

着手在鬍鬚一樣將是如下的方式：

嗨

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

希望它可以幫助..

來源

2011-07-27 15:12:46 Baz1nga

不適用於我，至少在使用pystache時。無法分辨這是一個錯誤還是有意的行爲。 – 2011-10-11 18:06:09

如果您將骨幹模型（「this.model.toJSON（）」）傳遞給模板添加{{#attributes}}可能會有所幫助。例如。 {{#attributes}} {{#Address}} {{City}} {{/ Address}} {{/ attributes}} – 2012-01-23 13:46:32

從小鬍子模板訪問嵌套骨幹模型屬性

回答

相關問題