我正在制作一个项目的原型,并且有一堆凌乱的代码。我所坚持的原型的特定部分是无法使用敲除从JSON文件进行迭代和渲染嵌套数组。以下是一些事实:
这里是这种情况的样子[很抱歉,没有足够的表示点来嵌入图像,tinypic必须这样做!]
http://i64.tinypic.com/25i26xl.png
我是使用剔除js的新手,我已经阅读了官方文档,但坦白地说,我在理解它方面有些麻烦
在这里出现代码行问题,任何建议将不胜感激。
//questions.json
[
{
"question": "Are you a buyer, seller or renter?",
"answers": ["Buyer", "Seller", "Renter"]
},
{
"question": "Second question",
"answers": ["yes", "no"]
}
]
1
// functions.js
function questionDisplay() {
var self = this;
self.data = ko.observableArray(qna);
}
function initQuestionDisplay() {
var qnaDataModel = new questionDisplay();
$("#questionsDisplay").modal("show");
ko.applyBindings(qnaDataModel);
}
2
<!-- test.html --!>
<div
class="modal-body"
data-bind="template: {name: 'template', data: $data}"
></div>
<script type="text/html" id="template">
<div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
<div class="question-box">
<h2 class="question" data-bind="text: _data['question']"/>
<p class="answers" data-bind="text: _data['answers']"/>
<div data-bind="foreach: _data['answers']">
<input type="radio" name="optionsGroup" data-bind="checked: _data['answers']" />
<span data-bind="text: _data['answers']"></span>
</div>
答案 0 :(得分:1)
你是如此亲密。不过要注意几件事。
<p data-bind="text: item"></p>
之类的自结束标签上使用<p data-bind="text: item" />
之类的结束标签。规则的例外是那些自封闭的标签,例如<input data-bind="value: somevalue" />
。这将消除一系列的错误。我已经被很多次抓住了。 var vm = {arrayOfItems : [ 'item1','item2']}
<ul data-bind="foreach: arrayOfItems">
<li data-bind="text: $data"></li>
</ul>
$data
的当前迭代数据上下文来引用当前项目。我提供了一个使用您提供的示例的工作示例。
有一个“学习”部分,它将带您完成有关使用Knockoutjs的相当全面的教程。
var qna = [
{
"questionId": "1",
"question": "Are you a buyer, seller or renter?",
"answers": ["Buyer", "Seller", "Renter"]
},
{
"questionId": "2",
"question": "Second question",
"answers": ["yes", "no"]
}
];
// functions.js
function questionDisplay() {
var self = this;
var mappedData = qna.map(function(item){
item.optionGroupName = "optionGroup_" + item.questionId;
item.selectedAnswer = ko.observable();
return item;
});
self.data = ko.observableArray(mappedData);
}
function initQuestionDisplay() {
var qnaDataModel = new questionDisplay();
//$("#questionsDisplay").modal("show");
ko.applyBindings(qnaDataModel);
}
initQuestionDisplay();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="modal-body" data-bind="template: {name: 'template', data: $data}"></div>
<script type="text/html" id="template">
<div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
<div class="question-box">
<h2 class="question" data-bind="text: _data['question']"></h2>
<p class="answers" data-bind="text: _data['answers']"></p>
<div data-bind="foreach: {data: _data['answers'], as: 'answer'}">
<input type="radio" data-bind="checked: $parent.selectedAnswer, attr:{name: $parent.optionGroupName, value: $data}" />
<span data-bind="text: answer"></span>
</div>
</div>
</div>
</script>
<h2>Results</h2>
<ul data-bind="foreach: data">
<li>
Question: <span data-bind="text: question"></span>
Answer: <span data-bind="text: selectedAnswer"></span>
</li>
</ul>