Knockout Viewmodel Funktion betrifft nur die letzte Instanz

Question

Was ich versuche zu erreichen ist, mehrere Viewmodels zu instanziieren (Nummer ist Variable), aber eine Funktion Bindung bei Klick betrifft nur die letzte Instanz, egal, von wo ich klicke.

JS

function Photo(name){ 
    var self = this; 
    self.name = name; 
} 

function SectionPhotosViewModel() { 
    var self = this; 

    // Editable data 
    self.photos = ko.observableArray([ 
     { 
      name: 'smth' 
     }, 
     { 
      name: 'smth else' 
     } 
    ]); 

    // Operations 
    self.addPhoto = function() { 
     self.photos.push(new Photo('anything')); 
    } 
} 

function bindSectionPhotos(element, index, list){ 
    ko.applyBindings(SectionPhotosViewModel, element); 
} 

_.each(document.querySelectorAll('fieldset.room'), bindSectionPhotos) 

HTML

<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 

Und was auch immer Knopf I klicken, wird nur der letzte intance wird geändert. Ideenas? Vorschläge?

Answer 1

Sie haben einen Konstruktor Funktion, die Sie ohne das Schlüsselwort new referenzieren, also immer auf die Funktionsdefinition bezogen. Versuchen Sie stattdessen:

function bindSectionPhotos(element, index, list){ 
    ko.applyBindings(new SectionPhotosViewModel(), element); 
} 

Hier ist eine vollständige Demo:

function Photo(name) { 
 
    var self = this; 
 
    self.name = name; 
 
} 
 

 
function SectionPhotosViewModel() { 
 
    var self = this; 
 

 
    self.photos = ko.observableArray([ 
 
    { name: 'smth' }, 
 
    { name: 'smth else' }]); 
 

 
    self.addPhoto = function() { 
 
    self.photos.push(new Photo('anything')); 
 
    } 
 
} 
 

 
function bindSectionPhotos(element, index, list) { 
 
    ko.applyBindings(new SectionPhotosViewModel(), element); 
 
} 
 

 
_.each(document.querySelectorAll('fieldset.room'), bindSectionPhotos)

.btn { background: #eee; padding: 5px; cursor: pointer; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset> 
 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset> 
 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset>