个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我无法让我的代码处理异步获取请求。我想加载通过 GET 请求在文件 todo.tag.html 的表中获取的 JSON 对象。我的问题是如何传递参数。我想将参数传递给我的防暴标签，但我不知道如何。我在标签中尝试了 every="{ allTodos() }"。如果我设置 async:false 但不是 async true，则此方法实际上有效。allTodos 是获取 JSON 对象的方法。有人知道我能做什么吗？这是我的(简化的)代码索引.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="./jquery-ui.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
<script src="./jquery-1.12.4.js"></script>
<script src="./jquery-ui.js"></script>
</head>
<body>
<script src="js/riot+compiler.min.js"></script>
<script type="riot/tag" src="todo-form.tag.html"></script>
<script type="riot/tag" src="todo.tag.html"></script>
</script>
<script>riot.mount('todoForm');</script>
<form>
<todo-form><todo-form>
<form>
</body>
</html>
todo.tag.html:
<todo>
<table style="width:100%">
<tr>
<td><label><input type="checkbox" checked={ done }> { title }</label> </td>
<td><p>{ due_date } <button type="button">Delete</button></p></td>
</tr>
</table>
</todo>
todo-form.tag.html
<todo-form>
<fieldset class="Issues">
<legend>Issues</legend>
<ul>
<todo each="{ allTodos() }"> </todo> // This here is the problem
</ul>
</fieldset>
<script>
// return all todos
allTodos(){
var test = [];
var url = 'http://myurl.com/projects'; //random adress
$.ajax({
url: url,
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
test = data;
}
});
return test;
}
</script>
</todo-form>
这就是我的 JSON 对象的样子
[
{
"done": true,
"title": "tests",
"due_date": "2016-11-20T23:00:00.000Z"
},
{
"done": true,
"title": "tests2",
"due_date": "2016-11-20T23:00:00.000Z"
}
]
最佳答案
对于标签通信，您可以在标签中发送参数，然后在子标签中使用 opts 对象。 (如果您需要的话，这里有一个关于标签通信的教程http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/)
这是一个示例(删除异步功能，因为这是另一个问题)正如您所看到的，我使用“todo in todos”来获取当前记录的引用，然后将一个名为 t 的参数与该记录一起传递。
<todo each="{ todo in todos }" t={todo} > </todo>
然后在 todo 标记中，我使用 opts 和 t 作为参数来访问记录。
{ opts.t.due_date }
我还使用了 on('mount') ，它将在安装标签时执行，并使用 this.update() 来强制更新。和 self= this 来维护上下文
var self = this
this.todos = []
this.on('mount', function(){
self.todos = self.allTodos()
self.update()
})
这是简化的代码
<todo-form>
<fieldset>
<legend>Issues</legend>
<ul>
<todo each="{ todo in todos }" t={todo} > </todo>
</ul>
</fieldset>
<script>
var self = this
this.todos = []
this.on('mount', function(){
self.todos = self.allTodos()
self.update()
})
allTodos(){
var test = [{done:'true', due_date:'11', title:'the title'}, {done:'true', due_date:'11', title:'the title'}]
return test
}
</script>
</todo-form>
<todo>
<table>
<tr>
<td><label><input type="checkbox" checked={ opts.t.done }> { opts.t.title }</label> </td>
<td><p>{ opts.t.due_date } <button type="button">Delete</button></p></td>
</tr>
</table>
</todo>
http://plnkr.co/edit/PqLFIduigsOYd2XQ5LWv?p=preview
关于异步函数，我认为您可以在成功回调函数中调用 self.update() 来重新呈现待办事项并将数据分配给self.todos = 数据
var self = this
allTodos(){
var url = 'http://myurl.com/projects'; //random adress
$.ajax({
url: url,
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
self.todos = data
self.update()
}
});
}
关于javascript - Riotjs 中的 Ajax 异步获取请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40820448/
24
4
0
我有这个简单的 radio 用户选择。 { name } Check this
父级在传递属性之前进行一些计算 这不起作用。 http://plnkr.co/edit/MguuodHHRlVytnikQKZ7?p=preview 如何实现这一目标？ 它是 Web C
我从 Github 下载了 Todo 演示:https://github.com/muut/riotjs/tree/master/demo 但是当我将 index.html 拖到浏览器中时，我什么也看
我正在使用 RiotJS 编写一个表应用程序，但在 onclick 事件上我一直遇到同样的问题。几乎每次我尝试使用 我的行为非常不稳定。有时，它会在页面加载或更新时多次调用该函数，然后根本不响应点击
我正在为系统使用防暴。但我在每个地方都使用公共(public)标签时遇到问题。因为我必须复制每个页面的所有通用标签。 我添加了所有这样的标签。有人对此有解决方案吗？
我有一个附加了 onchange={ MethodName } 的select。如果我手动更改该值，则会触发它。当我调用 $('select#myid').trigger('change') 时，它不
我希望通过在 RiotJS 中的 each={} 循环期间缓存重复值来提高性能和可读性。有没有办法做到这一点，不会渲染该值和/或产生不必要的性能开销？ 之前: {item.text}
我刚刚开始学习 riotJS，无法弄清楚标签(实例)之间的通信是如何完成的。我创建了一个简单的例子。假设我有以下标签: { warning_message } th
我无法让我的代码处理异步获取请求。我想加载通过 GET 请求在文件 todo.tag.html 的表中获取的 JSON 对象。我的问题是如何传递参数。我想将参数传递给我的防暴标签，但我不知道如何。我在
我在使用yield和更新标签时遇到问题，请参见示例http://codepen.io/Pysta/pen/pEyoBY { value }
这很奇怪。我做错了什么？ class Store extends Riot.Observable { trigger():void { // shouldn't this be comple
我不太确定我是否正确理解了可观察对象的工作方式以及如何从挂载的标签中获取引用。我有一个组件。在这个组件中，我们有一个 组件 和一个 组件。目的是避免组件之间的耦合。因此，我希望我的搜索组件 在搜索完成
从这个工作元素开始，sans-js:http://jsfiddle.net/37z1z7g1/
我似乎无法弄清楚如何将变量传递到自定义元素的类、ID 或数据属性中。 opts.status、opts.id 和 opts.url 如果我在像 这样的元素中传递它们，它们都可以工作，但是如何将变量
我正在尝试使用加载标签的概念，我可以包装其他元素以在异步检索数据时提供一致的加载显示。考虑以下代码: This example relies on browserify (require) but s
不得不说，为 Typescript 设置环境是费力且充满挫败感的。无论如何，这都不是一项直接的任务。 无论如何: I am still trying to setup riot-ts with JSP
我正在尝试向现有标记添加一个方法，单击按钮时调用该方法，但在开发构建时出现此错误。 https://github.com/wbkd/riotjs-startkit ./src/components/i
我是一名优秀的程序员,十分优秀！