將observableArray作爲函數參數傳遞

Question

我試圖實現的內容： 帶有一個文本輸入字段（名稱）的窗體，帶有一些選項的兩個選擇字段（類型爲&列），並帶有一個提交按鈕，用於創建一個Widget它的標題設置爲名稱，數據類型設置爲類型和列 - 它是頁面中的位置。

在這種情況下，類型在視圖中定義了幾個不同的選項，它的工作原理是花哨的，所以我現在不會進入我的工作方式。

截至目前我有三列，每它自己的observableArray頁面 - 像這樣：

self.col0 = ko.observableArray([]); 
self.col0.id = 'col0' 

這同樣適用於col1和COL2。我的目標是讓選擇字段指向這些數組。至少這是我認爲我需要做的。

我有一個createWidget函數，它查看DOM中的Name和Type值（如果我在這裏錯了，那麼這是我用KnockOut創建的第一件事），並創建一個新的Widget這些數據 - 像這樣：在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功能

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

輸入/選擇元素 - 像這樣：

​​

Shazam，它的工作原理！

但是，這隻會將新Widget輸出到第一列（col0），它不會將列選擇字段的值考慮在內，並且不會將新Widget移入正確的列。多試錯後，我得到相當多的錯誤歸結爲：

1）「無法調用不印字的未定義」

2）「遺漏的類型錯誤：對象功能可觀察到的（）....有沒有方法'不換'

因此，現在的代碼看起來像上面的例子，它不是理想的任何手段，但不同的列與knockout-sortable連接，這不是一個巨大的交易，如果這個功能必須用戶仍然可以將小工具從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：我現在怎樣才能將這些小工具綁定到我在表單中選擇的列？ 我會這樣做嗎？

<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綁定直列在名單上您的視圖模型：

<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。