javascript - 传入一个 observableArray 作为函数参数

Question

我要实现的目标:一个带有一个文本输入字段(名称)的表单，两个带有一些选项(类型和列)的选择字段以及一个提交按钮，该按钮创建一个小部件，其标题设置为名称，数据类型设置为类型和列 - 它的位置在这一页。

在这种情况下，类型在 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>

还是我跑题了？ :)

Answer 1

我会将列中的项目集合作为一种类型，如下所示:

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 .