I am trying to do something similar to a todo list with story name instead of a todo item.
Model code:
class Story < Volt::Model
validate :name, length: 5
end
Controller code:
module Main
class MainController < Volt::ModelController
model :store
def index
end
def add_story
new_story = Story.new(name: page._name)
_stories << new_story
page._name = ""
end
...
end
end
View code:
<:Title>
Home
<:Body>
<h1>Home</h1>
<form e-submit="add_story" role="form">
<div class="form-group">
<label>Todo</label>
<input class="form-control" type="text" value="{{ page._name }}" />
</div>
</form>
{{ _stories.each do |story| }}
<p>{{ story._name}}</p>
<button e-click="story.destroy">X</button>
{{ end }}
When I add a story name and try to click the delete button, I get the following error:
Uncaught NoMethodError: undefined method `to_sym' for #<Story id: "94f1..fc0f", name: "Test">
Stack trace for the error:
(anonymous function) @ app.js:3607
Opal.defn.TMP_1 @ app.js:2486
Opal.defn.TMP_2 @ app.js:20321
def.$method_missing.TMP_8 @ app.js:21386
method_missing_stub @ app.js:722
(anonymous function) @ app.js:18726
def.$destroy @ app.js:21518
def.$call.TMP_1 @ app.js:13114
(anonymous function) @ app.js:26485
$a.$$p.TMP_2 @ app.js:26475
Opal.yieldX @ app.js:850
def.$call.TMP_2 @ app.js:13044
$a.$$p.TMP_3 @ app.js:26634
Opal.yield1 @ app.js:830
def.$each.TMP_9 @ app.js:7253
$a.$$p.TMP_2 @ app.js:26634
Opal.defn.TMP_6 @ app.js:3497
def.$handle @ app.js:26639
$a.$$p.TMP_1 @ app.js:26610
jQuery.event.dispatch @ jquery-2.0.3.js:4677
elemData.handle @ jquery-2.0.3.js:4361
After I reload the page or even if I have another window simultaneously open, I am able to delete the story. So the #destroy
method doesn't work on the Story
model until I reload, but I don't understand why and how to fix it.
Ok, this issue was on my end. If you run off of master, this should work now.
gem 'volt', github: 'voltrb/volt'