淘汰排序数组不能正确显示嵌套元素
Knockout sortable array not displaying nested elements correctly
我是Knockout.js的新手,最近我开始使用JQuery和knockout-sortable项目。对于我的项目,我使用一个复杂的数据结构来显示一些表单。在某一点上,我试图创建一个嵌套的包含问题的可排序页面数组。我能够得到一个容器,其中包含所有的页面和他们的信息,但我有麻烦,使容器显示正确的问题。
如果HTML中有以下内容:
<h2><span data-bind="text: DiscoveryFormUpdateLabel"></span></h2>
<div class="pagesList" data-bind="foreach:discoveryForm">
<div class="row">
<div class="text-area">
<label>Discovery Form Name: </label>
<input data-bind="value:Name" width="400" />
</div>
</div>
<br />
<br />
<br />
<div class="row">
<div class="text-area">
<label>Welcome (HTML):</label>
<textarea data-bind="value: Welcome" rows="12" cols="89"></textarea>
</div>
</div>
</div>
<ul data-bind="sortable: {template: 'pages', data:discoveryFormPages}"></ul>
<script type="text/html" id="pages">
<li>
<div class="row">
<label>Name: </label>
<input data-bind="value:Name" />
</div>
<div class="row">
<label>Questions:</label>
</div>
<ul data-bind="sortable: {foreach:Questions}">
<li>Foo</li>
</ul>
<ul data-bind="foreach:Questions">
<li>Foo</li>
</ul>
<ul data-bind="sortable: { template: 'questions', foreach:Questions}" width="80%"></ul>
</li>
</script>
<script type="text/html" id="questions">
<li>
<div class="row">
<label>Subject:</label>
<textarea data-bind="value:Subject" cols="45"></textarea>
</div>
<div class="row">
<label>Type:</label>
<select data-bind="options: $root.questionTypes, optionsText:'Description', value:Type"></select>
</div>
<div class="row">
<label>Tagline:</label>
<textarea data-bind="value: Tagline" cols="45"></textarea>
</div>
<div class="row">
<label>Visible:</label>
<input type="checkbox" data-bind="checked:Visible" />
</div>
</li>
</script>
在pages
模板中,我使用三种不同的方式来尝试显示问题。第一种方法显示一个可排序的Foo
,第二种方法显示正确的Foo
数量,第三种方法显示一个空白的可排序区域,没有项目。我在一个JS小提琴工作,但我必须从数据库中获得复杂的信息,所以它需要时间。如果有任何帮助,也欢迎:)。
那么,我的问题是,为什么我得到了三个不同的东西,我错在哪里?
编辑:我基于这个模板。
我正在使用这个项目。
我设想的最终结果与此有点相似。
在jsFiddle中获取一个示例可能会有所帮助,但它看起来像:
这个:<ul data-bind="sortable: {foreach:Questions}">
你想要的是sortable: Questions
它相当于sortable { data: questions }
这个:<ul data-bind="sortable: { template: 'questions', foreach:Questions}" width="80%"></ul>
你想要:sortable: { template: 'questions', data: Questions }
所以,主要是用data
代替foreach
相关文章:
- 显示嵌套窗体
- 如何在html angular中显示嵌套的json元素
- Ui路由器未显示嵌套的子内容
- ag网格没有显示嵌套的json
- 在 Joomla (1.7.0) 中单击时显示嵌套列表
- 显示嵌套json集合的主干
- 使用Emberjs中的每个显示嵌套的json数据
- 如何使用Angular显示嵌套在ng网格中的类似json的复杂内容
- 在ng repeat中显示嵌套的json
- 如何在 Vue.js 中显示嵌套对象
- 显示嵌套 JSON 结构中的数据时出现问题
- 显示嵌套uls的正确方式是什么
- 如何在FuelUX树引导插件中显示嵌套数据项
- 模型在Sails中只显示嵌套模型的ID
- 在ng-repeat中不显示嵌套JSON
- 如何使用基本适配器在Ember.js模型的模板中显示嵌套数据
- Angular显示嵌套的json值
- 如何显示隐藏元素和显示嵌套元素
- 如何在Ionic框架下使用ng-repeat显示嵌套的JSON对象
- 如何使用javascript或angularjs显示嵌套json结构中的名称值