我正在迈出理解Turbo帧和Turbo流的第一步。
在请求之后,我的日志表明相关的turbo_stream.erb文件已经呈现,但DOM保持不变。
有谁能给我指明正确的方向,帮助我了解发生了什么事?
详情如下:
我正在尝试构建一个typeahead/ autocomplete字段,用于填充来自服务器的结果。当页面加载时,我想用一些常用选项预先填充列表。
我有一个viewcomponent刺激控制器,它发出一个获取请求。
# typeahead_controller.js
myRequest() {
return new Request("http://url.to/typeaahead_controller/index", {
method: "GET",
headers: {
Accept: "text/vnd.turbo-stream.html"
},
redirect: "manual"
});
}
connect() {
fetch(this.myRequest())
}
字符串
该页具有空列表容器
#mypage.html.erb
<ul id="results"></ul>
型
控制器并没有明确地包含turburreams responses_to(但是我已经用这个测试过了,似乎没有什么区别)
def index
@ojbs = MyObjects.default_options_scope # I've checked this returns objects, but I'm also testing with a Hello World object (see below) so this should not matter
end
型
我有一个Turbostream视图(我已经用update、append和其他动词测试过)。
# typeahead/index.turbo_stream.erb
<%= turbo_stream.append "results" do %>
<li>Hello World</li>
<% end %>
型
当重新加载页面时,日志似乎表明请求得到了正确处理
Started GET "/typeaheads"
Processing by TypeaheadsController#index as TURBO_STREAM
Rendering typeahead/index.turbo_stream.erb
Rendered typeahead/index.turbo_stream.erb (Duration: 3.3ms | Allocations: 282)
Completed 200 OK in 57ms
型
浏览器网络选项卡显示请求,但响应为空(我不知道是否应该?)
有人能看出这种做法有什么明显的错误吗?我意识到我可能可以在这里使用Turbo帧,但我很有兴趣看看如何/是否可以使用Turbo流。Turbo Stream是解决此问题的错误工具吗?
1条答案
按热度按时间oug3syen1#
我的问题是,我试图用同样的方式更新所有目标类css-selector“.invoice-contacts”
要使它工作,你应该使用
update_all
方法而不是update
个字符