我需要从 couchdb json 数据中显示来自属性和 implements 的嵌套数据。
我设法用JavaScript来隐藏和显示我选择的所选div,但它只显示在第一行。其他行不受影响。也许我的JavaScript遇到了一些问题,或者我的foreach
来自淘汰赛。“
如果所选选项是属性,则显示其上的属性数据。
Converter: 8
Description: ""
EnumTypeName: ""
Name: "MainFile"
ValidationType: 4
对于工具:
TypeName: "ITSR2.Bricks.Access.IAccessBrick"
不是同时btw:P。
我搜索并查看了淘汰赛的文档,但找不到任何内容。
这是我的索引:
<ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
<li data-bind="with: value">
<div class="collapsible-header"><i class="material-icons">filter_drama</i>
<p data-bind="text: Name"></p>
</div>
<div class="collapsible-body">
<p data-bind="text: TypeName"></p>
<p data-bind="text: AssemblyName"></p>
<div class="row">
<form class="col s12">
<div class="row">
<div class="col s6 m6">
<div class="col s6 m6">
<label>Select</label>
<select class="browser-default" onchange="showDiv(this)">
<option value="" disabled="" selected="">Choose your option</option>
<option value="Properties">Properties</option>
<option value="Implements">Implements</option>
</select>
</div><!-- end col s6 -->
<div class="col s6 m6" >
<div id="Properties" style="display: none;">
<p>Properties</p>
<ul data-bind="foreach: Properties.Properties">
<b>Name:</b> <span data-bind="text: $data.Name"></span></br>
<b> Validation Type: </b><span data-bind="text: $data.ValidationType"></span></br>
</ul>
</div>
<div id="Implements" style="display: none;">
<p>Implements</p>
<ul data-bind="foreach: Implements.Interfaces">
<b>Name:</b> <span data-bind="text: $data.TypeName"></span></br>
</ul>
</div>
</div><!-- end col s6 -->
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
我的 Main.Js 文件包含 viewModel 以及我如何检索数据:
function showDiv(elem){
if(elem.value == 'Properties'){
document.getElementById('Properties').style.display = "block";
document.getElementById('Implements').style.display = "none";
}
else if(elem.value == 'Implements'){
document.getElementById('Properties').style.display = "none";
document.getElementById('Implements').style.display = "block";
}
else{
document.getElementById('Properties').style.display = "none";
document.getElementById('Implements').style.display = "none";
}
}
function ViewModel() {
var self = this;
self.myfield = ko.observableArray([]);
}
var db = new PouchDB('http://localhost:5984/helloworld');
var vm = new ViewModel();
db.query("bricksetup/docs").then(function(result) {
var data = result;
console.log(data);
vm.myfield(data.rows);
//data.rows.forEach(function(row){
//vm.data.push(row.value)
// })
//vm.myfield(data.rows[3].value.Name);
});
ko.applyBindings(vm);
我的数据在控制台上的显示截图:
我创建了2 Div用我的javascript显示它们
任何帮助表示赞赏
答案 0 :(得分:0)
您的foreach
很好,但您处理表单数据的方法不是Knockout方式。您应该更改select
代码以使用淘汰版本,然后让一些JavaScript监听(subscribe
)进行更改。
首先,我们将在视图模型的选项中使用在选择某些内容时设置的属性:
self.selectDivs = ko.observableArray(['Properties', 'Implements']);
self.selectedDiv = ko.observable();
然后我们将用以下代码替换您select
代码:
<select class="browser-default" data-bind="options: $root.selectDivs,
value: $root.selectedDiv,
optionsCaption: 'Choose...'"></select>
基本上这样做是为了在选择时设置self.selectedDiv
值。
下一步是仅在选择相应选项时显示您的div。这是通过使用visible
绑定:
<div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
<p>Properties</p>
..和你所拥有的其他部分相同:
<div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
<p>Implements</p>
(注意:$root
是您的ViewModel
实例。这是访问数据中最顶级父级的方式)
我已将所有这些内容放在显示所有这些内容的 working example 中,以及其他一些建议的更改。