javascript - this.model.get 不是一个函数

Question

我有一个从 REST API 返回以下内容的 JSON:

[
    {
        title: "Block 1",
        images: [url1, url2, url3]
    },
    {
        title: "Block 2",
        images: [url7, url8, url9]
    },
    {
        title: "Block 3",
        images: [url4, url10]
    }
]

在 View 上我想呈现 URL，以便我可以在模板上显示图像，为此我有以下内容:

index.html

<script id="template" type="text/template">
    <img src=<%= images %>>
</script>

Main.js

theView = Backbone.View.extend({
    el: $('#mydiv'),
    render: function() {
        var template = _.template($('#template').html());
        var html = template(this.model.toJSON());
        this.$el.html(html);
        return this;
    }

})

fetchFromServ = Backbone.Model.extend({
    url: "http://example.com/jsonFile.php"
})

document.addEventListener('DOMContentLoaded', () => {

    var fet = new fetchFromServ();
    foo = fet.fetch();

    var view = new theView({ model: foo });
    view.render();

});

到目前为止，这是我得到的:

Uncaught TypeError: this.model.get is not a function

Answer 1

使用 var(或 ES6 变体 let 或 const)，这样您就不会总是创建隐式全局变量。

var foo = fet.fetch();

fetch 返回 jqXHR因为它调用 jQuery.ajax在后台，它不会返回模型。

因此您应该使用 fet 实例化您的 View 。

var view = new theView({ model: fet });

<小时/>

此外，一个好的约定是将“类型”变量大写，例如 TheView 或 FetchFromServer。

<小时/>

您可以将 document.addEventListener 替换为 jQuery's shorthand $(() => {})因为您已经在使用 jQuery。

<小时/>

请注意，您的模板无法使用您提供的当前数据。

您需要循环遍历 images URL 数组并为每个图像输出一个 img 标记。为此，您应该使用 Backbone Collection 来处理接收到的数据。

已经有大量的示例、教程和许多其他答案解释了如何呈现列表。这是我自己的一些:

• Simple example或another
• Example which includes a cleanup
• Advanced technique to efficiently render a list