带有 Coffeescript 基本 GET 的主干 JS答案

【问题标题】：Backbone JS w/ Coffeescript basic GET带有 Coffeescript 基本 GET 的主干 JS
【发布时间】：2013-04-02 14:15:06
【问题描述】：

我正在学习 CoffeeScript 和 Backbone JS。我只想装载一件设备。是的，我知道我不需要 Backbone JS - 但如果我从基础开始学习，它会帮助我学习。页面加载后，我希望它从服务器获取一些 JSON，并将其显示在页面上。

到目前为止，这是我的咖啡脚本：

jQuery ->
    class Equipment extends Backbone.Model
        defaults:
            title:''
            desc:''
        url:'/getData'

    class ItemView extends Backbone.View
        tagName: 'div'

        initialize: ->
            _.bindAll @, 'render'

        render: ->  
            $(@el).html """
                <h1>#{@model.get 'title'}</h2>
                <p>#{@model.get 'desc'}</p>
            """
            @

    class AppRouter extends Backbone.Router.extend
        routes:
            '':'getData'

        getData: ->
            @equipment = new @Equipment()
            @equipmentView = new @ItemView
                model: @equipment
            @equipment.fetch()
            $('div').html @equipmentView.render().el

    appRouter = new AppRouter

    Backbone.history.start()

我觉得我已经准备好了所有部分，并且没有出现任何错误（无论是在编译还是在运行页面时）。

我期望从服务器返回的基本 JSON 只是一个与此相呼应的 PHP 页面：

{
    "title": "title",
    "desc": "description"
}

我错过了什么？

【问题讨论】：

标签： json backbone.js coffeescript

【解决方案1】：

@equipment.fetch() 是否会触发 HTTP 请求？

据我了解，您必须设置 ID：@equipment = new @Equipment(id:123)，这将触发“/getData/123”请求。

或者在fetch中指定url：@equipment.fetch(url:"/getData")来加载

但是视图仍然是空的，因为在执行视图 render() 时数据还没有加载。当模型发生变化时，Backbone 不会自动更新视图（就像 EmberJS 一样）。

在初始化方法中添加@listenTo(@model, "change", @render)，以便在模型更改时重新渲染。

我为您找到了一个不错的指南/教程 http://adamjspooner.github.com/coffeescript-meet-backbonejs/

【讨论】：

我做了这些更改，但它没有触发 HTTP 请求。
路线“”有效吗？将其更改为 "test1":"getData" 并将 #test1 添加到 url。

【解决方案2】：

你必须告诉 Backbone 像这样路由你的初始 url ('')：

Backbone.history.start pushState: true

您还应该传递一个 id（我认为 Backbone 在您的情况下会请求 /getData/undefined 并且在旁注中，我认为您应该使用咖啡的胖箭头而不是 bindAll （这是咖啡脚本的众多优点之一，但是你应该去掉一些@s，因为它们不再引用 window...

【讨论】：