ノックアウトviewmodel関数は最後のインスタンスのみに作用します

Question

私が達成しようとするのは、複数のビューモデル（数値は可変です）をインスタンス化することですが、クリック時の関数バインドはクリックした場所に関係なく最後のインスタンスにのみ影響します。私はクリックし何でもボタン

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> 

そして、最後intanceが変更されます。アイデア？提案？

Answer 1

コンストラクタは、newキーワードなしで参照する関数なので、常に関数定義を参照しています。代わりにこれを試してみてください：

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

はここで完全なデモです：

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>