1

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

在这种情况下，类型在视图中定义了几个不同的选项，它的工作原理很花哨，所以我现在不会讨论我是如何让它工作的。

到目前为止，我有一个包含三列的页面，每一列都是它自己的 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); }"

沙赞，它有效！

但是，这只会将新的小部件输出到第一个列 (col0)，它不会考虑列选择字段的值，也不会将新的小部件移动到正确的列中。经过多次试验和错误后，我遇到的错误几乎可以归结为：

1）“无法调用未定义的方法unshift”

2）“未捕获的TypeError：对象函数observable（）......没有方法'unshift'

因此，到目前为止，代码看起来像上面的示例，无论如何它并不理想，但不同的列与可淘汰排序相关联，如果必须废弃此功能，这并不是什么大问题。用户仍然可以将小部件从 col0 移动到 col2，反之亦然。

如果有人有资源可以为我指明正确的方向，或者他们袖手旁观的答案 - 随时分享！

一切顺利，卡斯。

编辑：Tyrsius 的后续问题

使用您提供的代码，我现在可以在选择框中使用三列，但是在将小部件输出到视图中时我有点挣扎。

使用我之前的代码，视图如下所示：

<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：我现在如何将这些小部件绑定到我在表单中选择的 col？我会这样做吗？

<ul data-bind="sortable: { template: 'widgetTmpl', data: entryColumn, afterMove: $root.widgetData }"></ul>

还是我走远了？:)

4

1 回答 1

3

我会将列上的项目集合保留为一种类型，如下所示：

var Column = function(header) {
    this.header = ko.observable(header);
    this.items = ko.observableArray([]);
};

诀窍是将列select直接绑定到视图模型上的列列表：

<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();
    };

这是演示这些的小提琴。

后续问题

你很接近，但数据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>

这是更新的小提琴。

于 2013-03-14T16:03:48.873 回答