js模板的输出是[object Array]而不是渲染的模板
Output of icanhaz.js templete is [object Array] instead of the rendered template
我正在使用Zepto.js, icanhazs .js和Backbone.js。我有几个模板,我试图渲染。在呈现模板并将结果插入页面后,我看到的唯一输出是[object Array]或[object HTMLTableElement]。
这是backbone.js路由器
InspectionsRouter = Backbone.Router.extend({
routes: {
"signin": "signin",
"orders": "orders"
},
signin: function() {
var signinForm = new SignInForm();
$('div#content').html(signinForm.render());
},
orders: function() {
InspectionsApp.active_orders = new Orders();
InspectionsApp.active_orders.fetch({
success: function() {
var order_list = new OrderList({
collection: InspectionsApp.active_orders
});
$('div#content').html(order_list.render());
},
error: function() {
Dialog.error("Unable to Load Active Orders");
}
});
}
});
第一个模板是静态的,没有插入数据。下面是代码
SignInForm = Backbone.View.extend({
render: function() {
this.el = ich.sign_in_form({});
return this.el;
}
});
另一个模板稍微复杂一些。
var OrderList = Backbone.View.extend({
tagName: 'table',
id: 'order_list',
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
var active_orders = {};
active_orders.orders = this.collection;
$(this.el).html(ich.order_list(active_orders));
return this.el;
}
});
实际的模板并不复杂。第一个是一个简单的符号形式。下一个是表格
这是第一个模板
<script id="sign_in_form" type="text/html">
<h2 class="page_title">Sign In</h2>
<form action="action/login.php" method="post" id="frm_login" name="frm_login">
<fieldset id="credentials">
<ol>
<li class="login">
<label for="email">E-mail Address</label>
<input type="email" name="email" id="email" tabindex="1" required>
</li>
<li class="login">
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="2" required>
</li>
</ol>
</fieldset>
<button class="button" id="btn_sign_in" type="submit" tabindex="3"><img src="icons/door_in.png">Sign In</button>
</form>
</script>
这是第二个模板。
<script id="order_list" type="text/html">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Status</th>
<th>Created</th>
<th>Assigned To</th>
</tr>
</thead>
<tbody id="order_list_body">
{{#orders}}
<tr>
<td>{{last_name}}, {{first_name}}</td>
<td>{{email}}</td>
<td>{{status}}</td>
<td>{{created_at}}</td>
<td>{{assigned_to}}</td>
</tr>
{{/orders}}
</tbody>
</script>
任何帮助都会很感激。问题似乎与ICanHaz或在主干。我试过提醒这个。
我找到了问题所在。js默认返回一个jQuery或Zepto对象。(我还以为是字符串呢。)您可以向ich添加第二个参数。模板函数触发原始字符串输出。返回Zepto对象不是问题,只是在Zepto中,$.html()不接受Zepto对象。选项是让ICanHaz.js输出原始字符串,或者使用接受Zepto对象的Zepto方法之一(append, prepend, before, after)。
要将数组呈现为字符串,只需使用:ich.myRenderFunction(myObject, true);
当模板没有正确解析时,这种情况就会发生在我身上:通常是实际模板中的错误。验证模板数据没有问题,并且它正在正确加载。
相关文章:
- Datetime格式为Friendly Time.Moment JS输出错误
- HTML5FileReader输出到D3.js图表
- 使用Rivets.js输出类
- 如何为d3.js图表输出组织/嵌套数据
- 使用JS从选择和文本输入中捕获值,并将输出返回到HTML
- d3.js鼠标悬停鼠标输出问题
- 如何在标签上输出Chart.js雷达图的正确值
- 节点JS express和控制台输出到命令行与浏览器
- Node.js/Express未输出console.log,highcharts.js给出未定义的错误
- Node.js zlib.deflate输出太长
- 节点.js加密输入/输出类型
- 选择以输出大小为优先级的编译到 JS 语言
- 动态按钮输出反应.js
- 在文件中执行 IIFE 时出现意外输出.js
- 输出JS函数输出到文本区域
- Gulp不会输出js的min文件
- Gulp-usemin不输出js文件
- “如果逻辑”基于胡子中的函数输出.js
- Firebug - 从文件运行时看不到控制台.log输出.js
- 无法使用——out将typescript模块(.ts)文件连接到单个输出(.js)中