使用 Backbone 将文本从 DOM 存储到 Rails 模型中

Question

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

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

到目前为止，我已经创建了一个视图

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

如您所见，视图在 li 元素上有一个点击事件。发生这种情况时，它会在控制台中显示来自该 li 元素的文本。

我想要做的是将 li（控制台输出）中的文本保存到我的 rails 电影模型中。我查看了RailsCast，但他使用的是表单，我找不到如何将文本保存到我的 Rails 模型中的示例。什么样的活动可以做到这一点？我是否需要使用集合和模型来使这种动态化？

Answer 1

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

---

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

1. 如果您需要所有 CRUD 动词或只需要一个带有 POST 方法的路由，则需要创建电影资源。 为了节省时间，只需使用脚手架生成器生成您的资源。 输入控制台rails g scaffold movies title:string duration:integer lang:string。

这将为您生成所有需要的文件（控制器、视图、模型），并为 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() 将触发POST 对/movies 的请求，这将创建带有标题的新电影模型。这是针对您的问题的最简单的解决方案。并确保在 ajax 标头中设置authentity_token，否则rails 会抛出错误（但它可能包含在您使用的gem 中，我没有使用它）。 Here 关于它的好帖子。

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

Answer 2

在 Vahan Vardanyan 的帮助下，我们得到了以下解决方案。

主干视图

class Movieseat.Views.MovieseatsIndex extends Backbone.View

  template: JST['movieseats/index'] 

  initialize: -> 
    @render() 

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

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

  showtext: (e) -> 
  # Creates a variable storing the text of the event target
    movie_title = $(e.target).text() 
  # Creates a new instance of the Movieseat (project name)model
    movie = new Movieseat.Models.Movieseat() 
  # Sets the content of the variable movie_title in the title collumn in the movie model
    movie.set('title', movie_title)
  # Save action
    movie.save() 

  el: "#container" 

骨干模型

class Movieseat.Models.Movieseat extends Backbone.Model

# Which model the data needs to be saved
  urlRoot: "movies" 
# What data needs to be saved
  defaults: 
    title: ""