javascript - 使用 Backbone 将 DOM 中的文本存储到 Rails 模型中

Question

我一直在使用 Rails4 和 Backbone.js 开发一个小型应用程序。到目前为止，我已经有了一个注册/登录系统，用户可以通过在输入字段中定义电影标题来创建他们看过的电影列表，该输入字段将电影标题存储在电影模型中并显示用户制作的电影在 View 中。

但我不喜欢用户必须重新加载页面才能看到结果，这就是为什么我想在我的项目中使用 Backbone。为此，我使用 'backbone-on-rails' gem。

到目前为止我已经创建了一个 View

class Movieseat.Views.MovieseatsIndex extends Backbone.View

  template: JST['movieseats/index']

  initialize: ->
    @render()

  render: ->
    @$el.html @template()

  events: -> 
    "click li": "showtext"

  showtext: (e) ->
    movietitle = $(e.target).text()
    console.log  movietitle

  el: "#container"

渲染模板，

<ul id="movie-overview">
    <li class="movietitle">Star Wars 1</li>
    <li class="movietitle">Star Wars 2</li>
    <li class="movietitle">Star Wars 3</li>
    <li class="movietitle">Star Wars 4</li>
    <li class="movietitle">Star Wars 5</li>
    <li class="movietitle">Star Wars 6</li>
    <li class="movietitle">Star Wars 7</li>
</ul>

<div>Not star wars</div>

在我的主页

:javascript 
  $(function() { 
    new Movieseat.Views.MovieseatsIndex
  });

#container

正如您所看到的，该 View 在 li 元素上有一个单击事件。当发生这种情况时，它会在控制台中显示该 li 元素中的文本。

我想要做的是将 li(控制台输出)中的文本保存到我的 Rails Movie 模型中。我看过RailsCast但他使用的是表单，而我找不到有关如何将文本保存到我的 Rails 模型中的示例。什么样的事件可以做到这一点？我是否需要使用集合和模型来实现这种动态？

Answer 1

首先我建议您使用Marionette与 Backbone这将为您的应用程序及其模块/子模块提供良好的结构。

<小时/>

对于当前状态下的问题，您可以使用 Backbone.Model 与后端 (Rails) 交互。

1. 如果您需要所有 CRUD 动词或仅使用 POST 方法的一条路由，则需要创建电影资源。 为了节省时间，只需使用脚手架生成器生成资源即可。 在控制台中输入rails gscaffold movie title:stringuration:integer lang:string。

这将为您生成所有需要的文件( Controller 、 View 、模型)以及适当的 CRUD 操作。在你的routes.rb中你会看到类似的内容:

routes.rb

YourApplicationName::Application.routes.draw do
  resources :movies
  # A lot of other routes including root
end

使用rake db:migrate运行迁移后。后端准备就绪!

现在在您的前端 javascript 源代码中添加新的主干模型:

var  MovieModel = Backbone.Model.extend({
    urlRoot: 'domain_path.com/movies', 
    defaults: {
       title: '', 
       duration: '',
       lang: ''
    } 
});

并在您的showtext方法中:

showText: function(e) {
    var movie_title = $(e.target).text()
    movie = new MovieModel();
    movie.set('title', movie_title);
    movie.save();  
}

这里 movie.save() 将触发对 /movies 的 POST 请求，这将创建带有标题的新电影模型。这是解决您的问题的最简单的解决方案。并且一定要在ajax header 中设置authenticity_token，否则rails会抛出错误(但它可能包含在您使用的gem中，我没有使用它)。 Here关于它的好帖子。

请尝试让我知道它是否有效。