this.model.get 不是函数

Question

我有一个 JSON returns 来自 REST API 以下 :

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

在视图中，我想呈现 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 return在后台有一个 jqXHR because it calls jQuery.ajax，它不是 return 模型。

所以你应该用 fet 来实例化你的视图。

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

此外，一个好的约定是将 "types" 变量大写，例如 TheView 或 FetchFromServer.

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

请注意，您的模板不适用于您提供的当前数据。

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

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

Simple example or

this.model.get 不是函数

this.model.get is not a function

javascript

backbone.js