使用KnockOutJS綁定複選框

在我的應用程序中，有一段動態加載的「位置」。位置是對象，而不是簡單的字符串（它們具有名稱，ID和其他屬性）。我需要能夠綁定到檢查的位置，並且還想跟蹤哪些在隱藏的輸入中被檢查，例如存儲逗號分隔的locationId的字符串。使用KnockOutJS綁定複選框

我發現這裏的一個很好的例子： Working with a list of checkboxes in knockoutjs

害得我這樣的jsfiddle： http://jsfiddle.net/rniemeyer/Jm2Mh/

然而，當我試圖用我的位置對象重新寫這篇文章，它拋出一個錯誤：

Uncaught ReferenceError: Unable to parse bindings. 
Bindings value: attr: { value: $data }, checked: $item.selections 
Message: $item is not defined

這是我到目前爲止所做的一個JSFiddle。（如果按F12並運行它，你可以看到上面的錯誤）。 http://jsfiddle.net/toddhd/BkUUX/3/

雖然錯誤是顯而易見的，$ item沒有定義，我真的不明白$ item是什麼，它爲什麼它在第一個例子中，而不是我的。

感謝您提供任何幫助。如果有人可以幫助我重寫代碼以顯示selectedLocations，也可以獲得獎勵積分。 :)

來源

2013-07-23 Todd Davis

$ Item不可用，因爲它在基因敲除的默認模板機制中不受支持。這實際上是jQuery的一部分（請參閱答案here）。如果你想使用它，你將不得不重寫默認的敲除模板機制。

這就是說，我在這裏展示了另一種方法來做到這一點，而不需要here。本質上，只需爲每個模型對象添加一個isSelected屬性並解決這個問題，它肯定是最簡單的路線。

var location = function (locationId, displayName, selected) { 
    var self = this; 
    self.LocationId = locationId; 
    self.DisplayName = displayName; 
    self.isSelected = ko.observable(selected);

};

此外，小提琴演示如何顯示選定的位置。

來源

2013-07-23 03:44:55 Sethcran

Here at Jsfiddle你會發現你的問題的工作解決方案，它也會顯示選定的位置。

的HTML代碼爲：

<div data-bind="template: { name: 'locationTmpl', foreach: locations, templateOptions: { selections: selectedLocations } }">/</div> 
<script id="locationTmpl" type="text/html"> 

    <input type="checkbox" data-bind="attr: { value: $data }, checked: $data.isSelected" /> 
    <span data-bind="text: $data.DisplayName"></span> 
</script> 
<hr /> 
<div data-bind="text: JSON.stringify(ko.toJS(selectedLocations), null, 2)"></div> 
<hr />

JavaScript代碼是：

<script type="text/javascript"> 
    function MyLocation(locationId, displayName, selected) { 
     this.LocationId = ko.observable(locationId); 
     this.DisplayName = ko.observable(displayName); 
     this.isSelected = ko.observable(selected); 
    } 

    var viewModel = function (items) { 
     this.locations = ko.observableArray([ 
      new MyLocation('1', 'Starbucks1'), 
      new MyLocation('2', 'Starbucks2', true), 
      new MyLocation('3', 'Starbucks3'), 
      new MyLocation('4', 'Starbucks4'), 
      new MyLocation('5', 'Starbucks5') 
     ]); 

     //self.selectedLocations = ko.observableArray([self.locations()[1]]);        
     this.selectedLocations = ko.computed(function() { 
      return ko.utils.arrayFilter(
       this.locations(), function (item) { 
        return item.isSelected(); 
       } 
       ); 
     }, this); 
    }; 

    ko.applyBindings(new viewModel()); 
</script>

我已經介紹的相同的代碼，博客，以及，你可以檢查它by clicking this link

來源

2013-07-23 08:42:03

謝謝伊姆蘭。您的意見非常有幫助，我讚賞selectedLocations的額外細分。另一個答案得到了信譽，因爲它是第一個，兩個答案几乎相同，並且SethCran的selectedLocation更簡潔一些。 –

不客氣託德！我很高興這對你有一些幫助。問候 –

使用KnockOutJS綁定複選框

回答

相關問題