我要实现的目标: 一个带有一个文本输入字段(名称)的表单,两个带有一些选项(类型和列)的选择字段以及一个提交按钮,该按钮创建一个小部件,其标题设置为名称,数据类型设置为类型和列 - 它的位置在这一页。
在这种情况下,类型在 View 中定义了几个不同的选项,它工作得很好,所以我暂时不讨论我是如何让它工作的。
截至目前,我有一个包含三列的页面,每一列都是自己的 observableArray - 如下所示:
self.col0 = ko.observableArray([]);
self.col0.id = 'col0'
col1 和 col2 也是如此。我的目标是让选择字段指向这些数组。至少那是我认为我需要做的。
我有一个 createWidget 函数,它查看 DOM 中的 Name 和 Type 值(如果我在这里错了请纠正我,这是我使用 KnockOut 创建的第一件事)并从中创建一个新的 Widget数据 - 像这样:
var Widget = function(name, type) {
var self = this;
self.name = name;
self.type = type;
};
var ViewModel = function() {
var self = this;
self.newWidgetName = ko.observable();
self.newType = ko.observable();
// Unrelated code in between
self.createWidget = function(target) {
newName = self.newWidgetName();
newType = self.newType();
widget = new Widget(newName, newType);
target.unshift(widget)
self.newWidgetName("");
};
DOM 中的输入/选择元素
input.widget-name type="text" placeholder="wName" data-bind="value: newWidgetName"
select data-bind="value: newType"
option value="calendar" Calendar
option value="article" Article
option value="document" Document
select.colPick data-bind="value: colPick"
option value="col0" Column 1
option value="col1" Column 2
option value="col2" Column 3
还有我的 createWidget 函数的点击处理程序——像这样:
a.btn.create-widget data-bind="click: function(){ createWidget(col0); }"
Shazam,有效!
但是,这只会将新的小部件输出到第一个列 (col0),它不会考虑列选择字段的值并将新的小部件取消移动到正确的列中。经过多次试验和错误后我得到的错误几乎可以归结为:
1) “无法调用未定义的方法 unshift”
2) “未捕获的类型错误:对象函数 observable() .... 没有方法‘unshift’
现在代码看起来像上面的例子,它无论如何都不是理想的,但是不同的列与 knockout-sortable 连接,如果这个功能必须被废弃也不是什么大问题。用户仍然可以将小部件从 col0 移动到 col2,反之亦然。
如果有人有资源可以为我指明正确的方向,或者他们的答案 - 请随时分享!
祝你一切顺利,卡斯。
编辑:Tyrsius 的后续问题
使用您提供的代码,我现在可以在选择框中使用三列,但是在将小部件输出到 View 中时我遇到了一些困难。
在我之前的代码中, View 是这样的:
<div class="cols">
<div class="col col-25">
<ul data-bind="sortable: { template: 'widgetTmpl', data: col0, afterMove: $root.widgetData }">
</ul>
</div>
<div class="col col-50">
<ul data-bind="sortable: { template: 'widgetTmpl', data: col1, afterMove: $root.widgetData }">
</ul>
</div>
<div class="col col-25">
<ul data-bind="sortable: { template: 'widgetTmpl', data: col2, afterMove: $root.widgetData }">
</ul>
</div>
</div>
我现在正在处理的是:
<div data-bind="foreach: columns">
<div data-bind="foreach: items" class="col">
<ul data-bind="sortable: { template: 'widgetTmpl', data: columns, afterMove: $root.widgetData }"></ul>
</div>
</div>
我的第一个问题,我意识到我当时没有考虑,所以跳过那个。
问题 #2:我现在如何将这些小部件绑定(bind)到我在表单中选择的列? 我会这样做吗?
<ul data-bind="sortable: { template: 'widgetTmpl', data: entryColumn, afterMove: $root.widgetData }"></ul>
还是我跑题了? :)
最佳答案
我会将列中的项目集合作为一种类型,如下所示:
var Column = function(header) {
this.header = ko.observable(header);
this.items = ko.observableArray([]);
};
诀窍是将列 select
直接绑定(bind)到 View 模型上的列列表:
<select data-bind="options: columns, optionsText: 'header', value: entryColumn"
这里发生的是下拉列表选择的实际 column
对象将存储在 entryColumn
属性中。稍后我们可以将项目直接放入其 items
列表中,因为我们将引用它。这也使我们能够在不更改逻辑的情况下支持任意数量的列。
添加代码将保持简单:
self.columns = ko.observableArray(columns);
self.entryName = ko.observable('');
self.entryType = ko.observable('');
self.entryColumn = ko.observable('');
self.types = ko.observableArray(['Small', 'Medium', 'Large']);
self.addWidget = function() {
var widget = new Widget(self.entryName(), self.entryType());
//Here is where we can directly add to the selected columns item list
self.entryColumn().items.push(widget);
self.resetForm();
};
这里是 the fiddle展示这些。
跟进问题
你很接近,但数据是 items
而不是 EntryColumn
<div data-bind="foreach: columns">
<div data-bind="sortable: { template: 'widgetTmpl', data: items}" class="column">
</div>
</div>
<script type="text/html" id="widgetTmpl">
<p data-bind="text: name() + ' - ' + type()"></p>
</script>
这是 updated fiddle .
关于javascript - 传入一个 observableArray 作为函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15392445/