Javascript 使用主干将DOM中的文本存储到Rails模型中

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

但我不喜欢用户必须重新加载页面才能看到结果，这就是为什么我想在我的项目中使用主干。为此，我使用了

'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>

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

---

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

首先，我建议您使用它，它将为您的应用程序及其模块/子模块提供良好的结构

---

对于当前状态下的问题，您可以使用

主干.Model

与后端（Rails）交互

1。如果您需要所有CRUD谓词，或者只需要一条带有POST方法的路由，则需要创建电影资源。 为了节省时间，只需使用scaffoldGenerator生成资源即可。 在控制台中键入标题：字符串持续时间：整数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_标记，否则rails将抛出错误（但它可能包含在您使用的gem中，我没有使用它）。关于它的好帖子

---

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

在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: "" 

---

你会建议那些仍在学习基本骨架的人使用木偶吗？关于rootUrl的问题，是否需要发布域名？因为我现在正在本地工作，但一旦它上线，url就会更改。我在控制台中遇到一个错误

未捕获引用错误：未定义MovieModel

。我已将您的代码添加到我的模型文件中，生成以下代码<代码>类Movieseat.Models.Movieseat扩展主干。模型MovieModel=Backbone.Model.extend（rootUrl:“movies”默认值：title:“duration:”lang:）顺便说一下，我已经在Rails中创建了一个电影模型，其中我有一个collumn

标题

@PeterBoomsma是的，你也可以从木偶中学习主干。关于我的答案-我有输入错误，我刚刚更新了，

rootUrl

->

urlRoot

。urlRoot也可以是一个函数。你可以检查

env

并返回你的

urlRoot

所需的url。你能发布你的主干网吗？模型源代码？我猜有些“var”声明丢失了。只是用CoffeScript重写我的答案并不能让它变得更好。

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: ""